VUE3侦听器:watch与watchEffect的区别与使用
一、watch与watchEffect的区别
watch 和 watchEffect 都能响应式地执行有副作用（除了返回预期结果外还会简介影响其它数据）的回调。它们之间的主要区别是追踪响应式依赖的方式
-
watch：只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。 -
watchEffect：会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。watchEffect中的
示例：
当然，它们还有一些其它区别，这里做一下简单的总结:
watch:
1.只侦听明确的数据。
2.只在侦听数据发生变动时触发。
3.提供变化前后的值。
watchEffect:
1.追踪能访问到的所有响应式属性。
2.初始化时会触发一次。
3.不提供变化前后的值
二、watch使用方式
1.watch使用展示
(1).单个ref侦听
const num1 = ref(0)
watch(num1, (newVlue, oldVlue) => {
console.log(newVlue, oldVlue);
});(2).多个ref侦听
const num1 = ref(1);
const num2 = ref(2);
watch([num1, num2], (newNum1, newNum2) => {
console.log(newNum2, newNum3);
});
(3).getter 函数
const num1 = ref(1);
const num2 = ref(2);
watch(
() => num1.value + num2.value,
(sum) => {
console.log(sum);
}
);2.侦听响应式对象的注意事项
响应式对象的值需要深度侦听才能得到，在ref侦听中会隐式地创建一个深层侦听器，在getter 函数方式侦听中则需要主动加一个{ deep: true }
const num1 = reactive({ a: 1 });
// 当num1.a从1变为2时
watch(num1, (newNum1, oldNum1) => {
console.log(newNum1.a, oldNum1.a); //2，2：可以正常侦听num1.a的变化,但是侦听旧值失败
});
watch(num1.a, (newNum1, oldNum1) => {
console.log(newNum1, oldNum1); //报错
});
watch(
() => num1,
(a) => {
console.log(a); //无反应，不能侦听num1的属性值的变化
}
);
watch(
() => num1.a,
(a) => {
console.log(a); //可以正常侦听num1.a的变化
}
);
watch(
() => num1,
(num1) => {
console.log(num1.a); //2:可以正常侦听num1.a的变化
},
{ deep: true }//开启深度侦听
);3.即时回调侦听器：{ immediate: true }
当使用watch时需要像watchEffect那样刚开始就执行一次时，可以使用{ immediate: true }
代码演示：
const num1 = ref(1);
watch(
num1,
(newNum1, oldNum1) => {
console.log(newNum1, oldNum1); //1,undefined
},
{ immediate: true }
);4.一次性侦听器：{ once: true }
当希望只对某个ref只侦听一次时，可以使用{ once: true }
const num1 = ref(1);
watch(
num1,
(newNum1, oldNum1) => {
console.log(newNum1); // 当num1从1变为2时:2,接着num1从2变为3:无反应
},
{ once: true }
);三、watchEffect使用方式
1.跟踪对象多个属性
watchEffect只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性，对于需要侦听一个对象中多个属性的情况watchEffect比深度侦听效率更高。
const nums = reactive({
num1: 1,
num2: 2,
num3: 3,
});
watchEffect(() => {
console.log(nums.num1 + nums.num2 + nums.num3);//num1,num2,num3任意一个变化时触发
});2.响应式数据请求
通过使用watchEffect可以在数据变化时自动发起请求，如下所示，当data变化时会自动发起新的请求
watchEffect(() => {
axios.post("https://ljy.com:5000/chat", data).then((res) => {
resData.value = res.data;
});
});四、watchPostEffect使用方式（dom更新后侦听）
vue的更新是异步的， Vue 的响应式数据发生变化时，Vue 不会立即更新 DOM，而是会等待当前同步任务执行完毕，然后在下一个事件循环的“tick”中执行更新。默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。
{{ a }}
如果想在dom更新后侦听，可以使用watchPostEffect
import { watchPostEffect } from "vue";
watchPostEffect(() => {
console.log(main.value);//1
});五、watchSyncEffect使用方式（任何更新之前触发）
watchSyncEffect是个同步侦听器，使用方式如下：
import { watchSyncEffect } from 'vue'
watchSyncEffect(() => {
/* 在响应式数据变化时同步执行 */
})六、停止侦听器
在 setup() 或
停止侦听器方式：
const unwatch = watchEffect(() => {})
// ...当该侦听器不再需要时
unwatch()注意，需要异步创建侦听器的情况很少，请尽可能选择同步创建。如果需要等待一些异步数据，你可以使用条件式的侦听逻辑：
// 需要异步请求得到的数据
const data = ref(null)
watchEffect(() => {
if (data.value) {
// 数据加载后执行某些操作...
}
})七、参考文档
侦听器 | Vue.js