全局創(chuàng)建

app.use(createPina()).mount

全局方法

通過(guò)app.config.globalProperties.xxx可以創(chuàng)建
這里我們寫了一個(gè)字符串翻轉(zhuǎn)的全局方法
main.js里面添加一個(gè)全局方法
不要忘了加$ 否則會(huì)報(bào)錯(cuò)

// #ifdef VUE3
//導(dǎo)入創(chuàng)建app
import { createSSRApp } from 'vue'
//導(dǎo)入創(chuàng)建app的方法
export function createApp() {//創(chuàng)建app的實(shí)例const app = createSSRApp(App)//自己添加一個(gè)全局方法app.config.globalProperties.$reverse=function(str){return str.split('').reverse().join('')}return {app}
}
// #endif

index.vue里面使用
定義字符串msg,以及方法setMsg并返回

<template><view><view>setUp</view><button @click="setNum(num+5)">{{num}}</button><button type="warn" @click="setMsg($reverse(msg))">{{msg}}</button></view>
</template>
<script>// 導(dǎo)入ref響應(yīng)數(shù)據(jù)import {ref} from 'vue'export default {setup(props,context){console.log(props,context)// 父組件傳入的參數(shù)，context上下文 attrs屬性，emit發(fā)送事件方法 expose導(dǎo)出 slots插槽// setup相當(dāng)于created生命周期// 定義num默認(rèn)值是 5const num = ref(5);// 定義更新num的方法const setNum =(v)=>{num.value=v;}// 返回num與setNum// 定義msgconst msg = ref('你好msg')const setMsg = v=>msg.value=v;return {num,setNum,msg,setMsg}}}</script>

setup組合式api

導(dǎo)入ref響應(yīng)數(shù)據(jù)
import {ref} from ‘vue’
setup相當(dāng)于created生命周期

export default{
setup(props,context){
var num=ref(5)
return {num}
}
<script setup></script>

響應(yīng)式核心

ref 定義響應(yīng)是值類型方法
reactive 引用類型
computed 從現(xiàn)有數(shù)據(jù)計(jì)算新的數(shù)據(jù)
兩種方式都可以實(shí)現(xiàn)

const dn=computed(()=>n.value*2)
const fee=computed({get(){if(n.value==1){return 7}else{var total=n.value*5+2return total}},set(v){n.value=Math.floor((v-2)/5)}})

watch監(jiān)聽(tīng)數(shù)據(jù)的變化

const stop=watch(list,(val,oldVal)=>{uni.setStorageSync(list,"list")},{deep:true})

watchEffect監(jiān)聽(tīng)副作用（只要被這個(gè)方法引用的數(shù)據(jù)，發(fā)送變化都會(huì)觸發(fā)）

watchEffect(()=>{uni.setStorageSync("list",list)uni.setStorageSync("n",n.value)},

readyonly只讀常用與優(yōu)化

生命周期帶on

可以簡(jiǎn)記為
掛載前后
更新前后
卸載前后
激活前后
setup中的生命周期，沒(méi)有beforeCreate與created
setup的生命周期需要加on前綴
1、setup() : 開(kāi)始創(chuàng)建組件之前，在 beforeCreate 和 created 之前執(zhí)行，創(chuàng)建的是 data 和 method

2、onBeforeMount() : 組件掛載到節(jié)點(diǎn)上之前執(zhí)行的函數(shù)；

3、onMounted() : 組件掛載完成后執(zhí)行的函數(shù)；

4、onBeforeUpdate(): 組件更新之前執(zhí)行的函數(shù)；

5、onUpdated(): 組件更新完成之后執(zhí)行的函數(shù)；

6、onBeforeUnmount(): 組件卸載之前執(zhí)行的函數(shù)；

7、onUnmounted(): 組件卸載完成后執(zhí)行的函數(shù)；

8、onActivated(): 被包含在 中的組件，會(huì)多出兩個(gè)生命周期鉤子函數(shù)，被激活時(shí)執(zhí)行；

9、onDeactivated(): 比如從 A 組件，切換到 B 組件，A 組件消失時(shí)執(zhí)行；

10、onErrorCaptured(): 當(dāng)捕獲一個(gè)來(lái)自子孫組件的異常時(shí)激活鉤子函數(shù)。

依賴注入provide inject

在父子組件傳遞數(shù)據(jù)時(shí)，通常使用的是 props 和 emit，父?jìng)髯訒r(shí)，使用的是 props，如果是父組件傳孫組件時(shí)，就需要先傳給子組件，子組件再傳給孫組件，如果多個(gè)子組件或多個(gè)孫組件使用時(shí)，就需要傳很多次，會(huì)很麻煩。

像這種情況，可以使用== provide 和 inject== 解決這種問(wèn)題，不論組件嵌套多深，父組件都可以為所有子組件或?qū)O組件提供數(shù)據(jù)，父組件使用 provide 提供數(shù)據(jù)，子組件或?qū)O組件 inject 注入數(shù)據(jù)。同時(shí)兄弟組件之間傳值更方便。

組件相關(guān)

< script setup> 中必須使用 defineProps 和 defineEmits API 來(lái)聲明 props 和 emits ，它們具備完整的類型推斷并且在 < script setup> 中是直接可用的：

defineProps 定義props

const props = {
modelvalue:(type:[Number.Stringl.defaut:)
maxLength:{type:Number,default:0}
}

defineEmit
子組件向父組件事件傳遞

const emits =defineEmit(["update:modelValue"])
emits("update:modelValue" ,content.value)

defineExpose暴露一個(gè)方法讓父組件可以通過(guò)ref調(diào)用
通過(guò)ref的方式調(diào)用子組件的clear方法
子組件必須暴露clear ，父組件才能調(diào)用

v-model簡(jiǎn)寫方式

:modelValue="msg"
@update:modelValue="msg=$event"