1、watch
- 引用：watch需要從Vue中引入才能使用罗丰；
- 參數(shù)：watch可以獲得原始值和當前值再姑；
- 特性：watch惰性執(zhí)行，首次不執(zhí)行代碼元镀；
- immediate: true;讓watch立即執(zhí)行。
-
偵聽多個屬性
const app = Vue.createApp({
setup() {
const { reactive, watch, toRefs } = Vue;
const nameObj = reactive({
cnName:'吳彥祖',
enNmae:'wuyanzu'
});
watch([() => nameObj.cnName, () => nameObj.enNmae], ([newCnName, newEnName], [oldCnName, oldEnName]) => {
console.log('watch', newCnName, oldCnName, '---', newEnName, oldEnName);
},{ immediate: true })
const { cnName, enNmae } = toRefs(nameObj);
return { cnName, enNmae }
},
template: `
<div>
<div>
Name: <input v-model="cnName">
</div>
<div>
Name is {{cnName}}
</div>
<div>
EnglishName: <input v-model="enNmae">
</div>
<div>
EnglishName is {{enNmae}}
</div>
</div>
`,
});
const app = Vue.createApp({
setup() {
const { ref, watch} = Vue;
const name = ref('吳彥祖');
watch(name, (newName, oldName) => {
console.log('watch', newName, oldName, '---', newEnName, oldEnName);
})
return { name }
},
template: `
<div>
<div>
Name: <input v-model="name ">
</div>
<div>
Name is {{name }}
</div>
</div>
`,
});
2讨永、watchEffect
- watchEffect無惰性卿闹，立即執(zhí)行代碼澳淑，不需要傳遞你要偵聽的內容比原，自動會感知代碼依賴杠巡，不需要傳遞很多參數(shù)雇寇，只要傳遞一個回調函數(shù)蚌铜。
- watchEffect只能獲得當前值嫩海，不能獲取之前數(shù)據(jù)的值。
- 引用：watchEffect需要從Vue中引入才能使用审葬；
const app = Vue.createApp({
setup() {
const { reactive, watch, watchEffect, toRefs } = Vue;
const nameObj = reactive({
name: 'dell', englishName: 'lee'
})
// 具備一定的惰性 lazy
// 參數(shù)可以拿到原始和當前值
// 可以偵聽多個數(shù)據(jù)的變化奕谭，用一個偵聽器承載
watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
console.log('watch', curName, prevName, '---', curEng, preEng);
}, { immediate: true })
const stop = watchEffect(() => {
console.log(nameObj.name);
console.log(nameObj.englishName);
setTimeout(() => {
stop();
}, 5000)
})
const { name, englishName } = toRefs(nameObj);
return { name, englishName }
},
template: `
<div>
<div>
Name: <input v-model="name">
</div>
<div>
Name is {{name}}
</div>
<div>
EnglishName: <input v-model="englishName">
</div>
<div>
EnglishName is {{englishName}}
</div>
</div>
`,
});
3、stop
- 使用stop可以停止watch 官册、watchEffect對內容的偵聽难捌。
總結：
- watch： watch惰性執(zhí)行，首次不執(zhí)行代碼根吁，watch可以獲得原始值和當前值；
- watchEffect： watchEffect只能獲得當前值满粗，watch無惰性愚争，會自動感知偵聽內容；
- stop：可以停止watch 轰枝、watchEffect對內容的偵聽；
