watch & watchEffect
watch 和 watchEffect 都是偵聽器波附，但是寫法和使用上有一些區(qū)別。
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
template: `
<div>
NameCN：<input v-model="nameCn" />
<div>NameCN is {{nameCn}}</div>
</div>
<div>
NameEN：<input v-model="nameEn" />
<div>NameEN is {{nameEn}}</div>
</div>
`,
setup() {
const { reactive, toRefs, watch, watchEffect } = Vue;
const nameObj = reactive({
nameCn: '張三',
nameEn: 'zhangsan'
})
// watch
watch([() => nameObj.nameCn, () => nameObj.nameEn], ([curCn, curEn], [prevCn, prevEn]) => {
console.log('cur：', curCn, curEn, '----', 'pre：', prevCn, prevEn);
})
// watchEffect
watchEffect(() => {
console.log(nameObj.nameCn);
console.log(nameObj.nameEn);
})
const { nameCn, nameEn } = toRefs(nameObj);
return {
nameCn,
nameEn
}
}
})
const vm = app.mount("#app");
</script>
watch：
- 具備一定的惰性冗美。
- 參數(shù)可以拿到最新值和之前的值魔种。
- 可以偵聽多個數(shù)據(jù)的變化，用一個偵聽器承載粉洼。
- 給 watch 第三個參數(shù) 添加
{ immediate:true }可以立即執(zhí)行节预，沒有惰性。
watchEffect：
- 立即執(zhí)行属韧，沒有惰性安拟。
- 不需要傳遞偵聽的內(nèi)容，自動感知代碼依賴挫剑，不需要傳遞很多參數(shù)去扣，只用傳遞一個回調(diào)函數(shù)。
- 不能獲取之前的值樊破。
