watch & watchEffect
watch 和 watchEffect 都是侦听器，但是写法和使用上有一些区别。
<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：
- 具备一定的惰性。
- 参数可以拿到最新值和之前的值。
- 可以侦听多个数据的变化，用一个侦听器承载。
- 给 watch 第三个参数 添加
{ immediate:true }可以立即执行，没有惰性。
watchEffect：
- 立即执行，没有惰性。
- 不需要传递侦听的内容，自动感知代码依赖，不需要传递很多参数，只用传递一个回调函数。
- 不能获取之前的值。
