在 Vue3 中，响应式系统是其核心特性之一。为了能够监听到数据的变化并作出相应的操作，Vue 提供了多种方式来实现这一功能，比如 watch 和 watchEffect。这两个函数都是用来观察响应式状态变化的工具，但它们的工作方式和使用场景有所不同。
watch 函数
watch 函数用于监听特定的数据源（如一个 ref 或计算属性）的变化，并在变化时执行回调函数。它提供了一种更细粒度的控制，允许我们指定何时触发回调以及如何处理这些变化。
基本用法
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log(`count 变化了：新值为 ${newVal}，旧值为 ${oldVal}`);
});在这个例子中，每当 count 的值发生变化时，都会调用提供的回调函数，输出新的值和旧的值。
深度监听
如果你需要监听一个对象或数组的变化，可以使用 deep 选项来实现深度监听：
-- -------------------- ---- -------
------ - --------- ----- - ---- ------
----- ----- - ----------
----- -
----- ----- -----
---- ---
-
---
------
-- -- -----------
-------- ------- -- -
---------------------- ------- --------
--
- ----- ---- -
--这里，通过返回一个嵌套的对象，我们可以对这个对象进行深度监听。当对象内部的任何属性发生变化时，回调函数都会被触发。
立即执行
默认情况下，watch 不会在初始时立即执行回调函数。如果需要在监听开始时立即执行一次回调，可以设置 immediate 选项为 true：
watch(count, (newVal, oldVal) => {
console.log(`count 初始值为 ${newVal}`);
}, { immediate: true });这样，在组件挂载后，会立刻执行一次回调函数，输出初始值。
watchEffect 函数
watchEffect 是一种更简洁的方式来监听状态的变化。它会自动追踪依赖项，并在其依赖项发生变化时重新运行。这意味着你不需要显式地指定需要监听哪些状态，只需要提供一个函数，该函数中的所有依赖项都会被自动追踪。
基本用法
import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
console.log(`当前 count 的值为 ${count.value}`);
});在这个例子中，每当 count 的值发生变化时，回调函数内的代码会被重新执行，输出最新的 count 值。
清理副作用
有时候，我们的回调函数可能需要执行一些清理工作，例如取消网络请求、删除事件监听器等。watchEffect 提供了一个返回值，可以用来执行这样的清理操作：
-- -------------------- ---- -------
--- ------
-------------------------- -- -
-- --------------
--------------- -- -
--------------------
---
-- -----------
----- - -------------- -- -
--------------
-- ------
---在这个例子中，onInvalidate 函数接收一个回调作为参数，当依赖项发生变化或组件卸载时，该回调会被调用，从而执行必要的清理操作。
总结
watch 和 watchEffect 都是 Vue3 中强大的响应式监听工具，可以根据具体需求选择合适的方法。watch 更适合于需要精确控制监听时机和行为的情况，而 watchEffect 则提供了更为简便和直观的方式来处理状态变化。
希望这个章节能帮助你更好地理解和使用 Vue3 中的 watch 和 watchEffect。在实际开发过程中，灵活运用这两种方法将大大提高你的工作效率。