watch 和 watchEffect 之间的区别是什么？

Question

Accepted Answer

两者都可以响应反应性变化而运行副作用，但它们在如何指定依赖项和提供的信息方面有所不同。将它们用于副作用（API 调用、日志记录、手动 DOM 操作）——**不要**用于导出值（那是 `computed`）。 ## watch — 显式源、提供旧值和新值 ```vue ``` `watch` 监视你指定的**特定**源，仅在该源变化时运行回调，并提供**旧值和新值** —— 当你需要比较它们或对某个特定状态片段做出反应时很有用。 ## watchEffect — 自动依赖追踪、立即运行 ```vue ``` `watchEffect` **自动追踪**其中使用的每个反应性值（无需源列表），并在**设置时立即运行**（然后在任何依赖变化时重新运行）。没有旧值/新值。 ## 并排对比 ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## 有用的 watch 选项 ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## 为什么这很重要选择正确的工具可以保持反应性副作用清晰：对导出值使用 **`computed`**，当你需要对特定源做出反应或比较旧值/新值时使用 **`watch`**（例如当 id 改变时 fetch），对依赖多个值且应自动追踪它们的副作用使用 **`watchEffect`**。错误地使用 watchers 进行导出（而不是 `computed`）是一个常见的反模式。