1、watch
- 引用：watch需要从Vue中引入才能使用；
- 参数：watch可以获得原始值和当前值；
- 特性：watch惰性执行，首次不执行代码；
- immediate: true;让watch立即执行。
-
侦听多个属性
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无惰性，立即执行代码，不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数。
- watchEffect只能获得当前值，不能获取之前数据的值。
- 引用：watchEffect需要从Vue中引入才能使用；
const app = Vue.createApp({
setup() {
const { reactive, watch, watchEffect, toRefs } = Vue;
const nameObj = reactive({
name: 'dell', englishName: 'lee'
})
// 具备一定的惰性 lazy
// 参数可以拿到原始和当前值
// 可以侦听多个数据的变化，用一个侦听器承载
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惰性执行，首次不执行代码，watch可以获得原始值和当前值；
- watchEffect： watchEffect只能获得当前值，watch无惰性，会自动感知侦听内容；
- stop：可以停止watch 、watchEffect对内容的侦听；
