watchEffect一進(jìn)入頁(yè)面就會(huì)執(zhí)行一次求豫，也可以進(jìn)行監(jiān)聽(tīng)?
watchEffect的回調(diào)函數(shù)中的響應(yīng)式數(shù)據(jù)只要發(fā)生了變化膜赃，回調(diào)函數(shù)會(huì)全部執(zhí)行一遍?
const obj=reactive({
? ? ? ? ? ? name:'zhangsan',
? ? ? ? ? ? age:20
? ? ? ? })
? ? ? ? const msg=ref('你好壞噢')
? ? ? ? watchEffect(()=>{
? ? ? ? ? ? let v=obj.name;
? ? ? ? ? ? let v2=msg;
? ? ? ? ? ? console.log(v,v2.value);
? ? ? ? })
return{
? ? ? ? ? ? obj,
? ? ? ? ? ? msg
? ? ? ? }
shallowReactive?
使用shallowReactive創(chuàng)建的響應(yīng)式對(duì)象不執(zhí)行嵌套對(duì)象的深層響應(yīng)式轉(zhuǎn)換，如下伤塌，obj.name和obj.age都是響應(yīng)式的灯萍，而obj.stu.no不是響應(yīng)式的，當(dāng)改變obj.stu.no的value時(shí)每聪，頁(yè)面中使用obj.stu.no的部分并不會(huì)重新渲染旦棉。??
? ? ? ? const obj1=shallowReactive({
? ? ? ? ? ? name:'法外狂徒',
? ? ? ? ? ? age:30,
? ? ? ? ? ? car:'BMW',
? ? ? ? ? ? dog:'哈士奇',
? ? ? ? ? ? stu:{
? ? ? ? ? ? ? ? no:55
? ? ? ? ? ? }
? ? ? ? })
toRef 與 toRefs
import {reactive} from 'vue'
export default {
? ? setup(){
? ? ? ? const obj = reactive({
? ? ? ? ? ? name:'zhangsan',
? ? ? ? ? ? age:20
? ? ? ? })
? ? ? ? return {
? ? ? ? ? ? obj,
? ? ? ? ? ? name:obj.name? ? ?
? ? ? ? }
? ? }
}
如上，我們定義了一個(gè)響應(yīng)式對(duì)象obj药薯，并將obj.name給到變量name绑洛，在使用時(shí)可以直接訪問(wèn)到obj.name，但這樣name無(wú)法做到響應(yīng)式童本，即使用v-model指令綁定name時(shí)真屯，無(wú)法實(shí)現(xiàn)雙向數(shù)據(jù)綁定，使用toRef或toRefs可以實(shí)現(xiàn)響應(yīng)穷娱。
toRe接收兩個(gè)參數(shù)绑蔫，第一個(gè)參數(shù)為目標(biāo)對(duì)象，第二個(gè)參數(shù)為值為字符串類型的key泵额，toRefs則直接接收一個(gè)目標(biāo)對(duì)象作為參數(shù)配深。
在 setup 中使用生命周期函數(shù)
在setup中可以通過(guò)在生命周期鉤子前面加上 “on” 來(lái)訪問(wèn)組件的生命周期鉤子。
因?yàn)閟etup是圍繞beforeCreate和created生命周期鉤子運(yùn)行的梯刚，所以不需要顯式地定義它們凉馆。換句話說(shuō)，在這些鉤子中編寫的任何代碼都應(yīng)該直接在setup函數(shù)中編寫亡资。
執(zhí)行順序setup>onBeforeCreate>created>onBeforeMount>onMounted澜共。
在Vue3中，beforeUnmount替代了beforeDestroy锥腻，unmounted替代了destroyed嗦董。
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
? ? setup(){
? ? ? ? console.log('setup');
? ? ? ? // dom掛載之前
? ? ? ? onBeforeMount(()=>{
? ? ? ? ? console.log('onBeforeMount');
? ? ? ? })
? ? ? ? // dom掛載之后
? ? ? ? onMounted(()=>{
? ? ? ? ? console.log('onMounted');
? ? ? ? })
? ? ? ? // setup 中return 的數(shù)據(jù)更新之前
? ? ? ? onBeforeUpdate(()=>{
? ? ? ? ? console.log('onBeforeUpdate');
? ? ? ? })
? ? ? ? // setup 中return 的數(shù)據(jù)更新之后
? ? ? ? onUpdated(()=>{
? ? ? ? ? console.log('onUpdated');
? ? ? ? })
? ? ? ? // 組件卸載之前
? ? ? ? onBeforeUnmount(()=>{
? ? ? ? ? console.log('onBeforeUnmount');
? ? ? ? })
? ? ? ? // 組件卸載之后
? ? ? ? onUnmounted(()=>{
? ? ? ? ? console.log('onUnmounted');
? ? ? ? })
? ? }
}
setup 語(yǔ)法糖
在setup中定義的變量與函數(shù)都需要return才能在頁(yè)面中使用，當(dāng)代碼體量越來(lái)越大時(shí)瘦黑，有時(shí)難免忘記在return中注冊(cè)京革。Vue3提供了setup語(yǔ)法糖，在script開(kāi)始標(biāo)簽中添加setup屬性幸斥，之后定義的變量與函數(shù)匹摇，無(wú)需return就可以在頁(yè)面中使用。
<template>
? <h1>CompC</h1>
? <p>
? ? 姓名：<input type="text" v-model="obj.name" /> 年齡：<input
? ? ? type="text"
? ? ? v-model="obj.age"
? ? />
? </p>
? <button @click="add">添加</button>
? <table border="1">
? ? <tr>
? ? ? <th>序號(hào)</th>
? ? ? <th>姓名</th>
? ? ? <th>年齡</th>
? ? ? <th>操作</th>
? ? </tr>
? ? <tr v-for="(v, i) in list" :key="i">
? ? ? <td>{{ i + 1 }}</td>
? ? ? <td>{{ v.name }}</td>
? ? ? <td>{{ v.age }}</td>
? ? ? <td><button @click="shanchu(i)">刪除</button></td>
? ? </tr>
? </table>
</template>
? /* 實(shí)現(xiàn)深淺拷貝的方式 */
function add() {
? /* arr.push(JSON.parse(JSON.stringify(obj))) */
? /* arr.push({...obj}) */
? if (obj.name.trim() == "" || obj.age.trim() == "") {
? ? return;
? }
? arr.push({
? ? name: obj.name,
? ? age: obj.age,
? });
? /* obj.name=''
? obj.age='' */
? for (var key in obj) {
? ? obj[key] = "";
? }
}
