前言
当依赖的数据发生改变，computed、watch 和 watchEffect 都会被触发。但是它们之间又有自己的特点，使用场景也不一样。
关于 computed 是什么，以及它和普通函数的区别、运用场景，查看我的另一篇博文：[Vue] computed 和 普通函数的区别。
| 特性 | watch |
watchEffect |
computed |
|---|---|---|---|
| 用途 | 监听特定响应式数据的变化，并在变化时执行回调 | 自动追踪所有响应式数据并执行副作用 | 定义基于响应式数据的计算属性 |
| 依赖声明 | 显式声明要监听的数据或计算属性 | 自动追踪回调中读取的所有响应式数据 | 显式声明依赖的响应式数据 |
| 返回值 | 无，主要用于执行副作用 | 无，主要用于执行副作用 | 返回计算得到的值 |
| 缓存 | 不缓存结果，每次依赖变化时都会触发 | 不缓存结果，每次依赖变化时都会触发 | 缓存计算结果，只有依赖变化时重新计算 |
| 初始执行 | 不会立即执行，只有当依赖变化时才执行 | 初始时立即执行一次，然后每次依赖变化时重新执行 | 在被读取时惰性求值 |
| 旧值与新值 | 可以访问旧值和新值 | 不提供旧值和新值 | 不提供旧值和新值 |
| 深度监听 | 可以通过 { deep: true } 选项进行深度监听 |
不支持深度监听 | 不支持深度监听 |
| 适用场景 | 需要精确控制响应式数据的监听和副作用 | 需要自动追踪多个依赖的副作用 | 计算属性需要在模板中展示，或计算结果需缓存 |
watch
用途：watch 是显式的监听器，主要用于监听特定的响应式数据变化。你可以选择要监听哪些变量（或计算属性），并在它们发生变化时执行特定的逻辑。
场景：适合需要在某些数据变化时执行异步操作或复杂逻辑的场景，比如发起 API 请求、手动计算等。
const stop = watch(count, (newValue, oldValue) => {
console.log(`count 从 ${oldValue} 变为 ${newValue}`);
});
// 停止监听
stop();
watchEffect
用途：watchEffect 是更自动化的反应式追踪器，能够自动追踪在回调函数中使用的所有响应式数据，并在这些数据发生变化时重新执行回调函数。
场景：适合依赖于多个响应式数据的场景，尤其是在你不想手动指定要监听的依赖时。常用于简化对多个响应式状态的追踪。
const stop = watchEffect(async (onCleanup) => {
const { response, cancel } = doAsyncWork(id.value)
// `cancel` 会在 `id` 更改时调用
// 以便取消之前
// 未完成的请求
onCleanup(cancel)
data.value = await response
});
// 停止监听
stop();