Vue 3 中 watch 与 watchEffect 的区别及性能优化建议

在 Vue 3 的组合式 API 中，响应式系统提供了两个核心的侦听器函数：watch 和 watchEffect。它们都用于观察响应式数据的变化并执行副作用，但在使用方式、执行时机和适用场景上存在显著差异。理解这些差异，并掌握相应的性能优化技巧，对于构建高效、可维护的 Vue 应用至关重要。

一、watch 与 watchEffect 的核心区别

1. 依赖收集方式不同

watchEffect 会自动收集回调函数内部使用的所有响应式依赖。只要在回调中访问了某个响应式属性，该属性就会成为侦听目标。例如：

const count = ref(0)
const name = ref('Vue')

watchEffect(() => {
  console.log(count.value, name.value)
})

上述代码会自动追踪 count 和 name，任一变化都会触发回调。

而 watch 需要显式指定要侦听的数据源，依赖关系由开发者手动声明：

watch([count, name], ([newCount, newName]) => {
  console.log(newCount, newName)
})

这种显式声明让 watch 的依赖关系更加清晰，也更容易控制。

2. 回调参数不同

watch 的回调函数会接收新值、旧值以及清理副作用的函数：

watch(count, (newVal, oldVal, onCleanup) => {
  // 可以访问变化前后的值
})

watchEffect 的回调则不提供新旧值参数，它只关注“执行副作用”本身。如果需要旧值，必须借助 watch 或在外部手动维护变量。

3. 执行时机不同

watchEffect 在组件初始化时会立即执行一次，用于自动收集依赖。而 watch 默认是惰性的，只有侦听源发生变化时才会触发回调。若希望 watch 立即执行，需要传入 { immediate: true } 选项。

4. 副作用清理方式不同

两者都支持通过 onCleanup 注册清理函数，但 watchEffect 的清理函数作为回调的第一个参数传入，而 watch 的清理函数作为第三个参数传入。这在处理异步请求时非常有用，可以避免竞态条件导致的状态错乱。

5. 适用场景不同

• watchEffect：适合依赖关系简单、需要立即执行副作用的场景，例如根据多个响应式数据动态计算并更新 DOM、发起请求等。
• watch：适合需要精确控制侦听源、需要访问旧值、需要惰性执行或需要条件性侦听的场景。

二、性能优化建议

1. 避免在 watchEffect 中访问不必要的响应式数据

由于 watchEffect 会自动收集依赖，如果在回调中无意间访问了某个响应式属性（例如在日志、调试语句或复杂计算中），就会导致不必要的重复执行。建议将不相关的逻辑移出回调，或改用 watch 显式指定依赖。

2. 使用 watch 的惰性特性减少初始开销

对于不需要在组件初始化时执行的副作用，优先使用 watch 而非 watchEffect。这样可以避免首次渲染时的额外计算，尤其在依赖链较长或副作用较重时效果明显。

3. 合理使用 flush 选项控制执行时机

Vue 3 为侦听器提供了 flush 选项，可选值为 'pre'（默认，组件更新前执行）、'post'（组件更新后执行）和 'sync'（同步执行）。

• 如果副作用需要访问更新后的 DOM，应使用 { flush: 'post' }，避免手动使用 nextTick。
• 尽量避免使用 'sync'，因为它会导致每次数据变化都同步触发回调，可能引发性能问题。

4. 对深层侦听保持警惕

当侦听一个响应式对象时，watch 默认只侦听引用变化。若需要侦听对象内部属性的变化，必须设置 { deep: true }。深层侦听会递归遍历对象的所有属性，对大型数据结构性能影响较大。建议：

• 尽量侦听具体的属性路径，而非整个对象。
• 如果必须深层侦听，考虑使用 shallowRef 配合手动触发更新。
• 在 Vue 3.5+ 中，可以使用 deep 选项传入数字来限制侦听深度。

5. 及时停止侦听器

在组件卸载时，watch 和 watchEffect 会自动停止。但在某些场景下（如手动创建的侦听器、在异步回调中创建的侦听器），需要手动调用返回的停止函数：

const stop = watch(source, callback)
// 在适当时机
stop()

未及时停止的侦听器可能导致内存泄漏和不必要的计算。

6. 使用 watchEffect 的 pre 刷新策略配合计算属性

对于派生状态，优先使用 computed 而非 watchEffect。computed 具有缓存机制，只有依赖变化时才会重新计算，而 watchEffect 每次依赖变化都会执行副作用。如果只是需要基于响应式数据计算新值，computed 是更高效的选择。

7. 批量更新与防抖节流

当侦听器回调执行频繁且开销较大时（如搜索输入、窗口 resize），可以在回调内部结合防抖或节流函数，减少实际执行次数。Vue 的响应式系统本身会批量处理同一 tick 内的多次数据变更，但跨 tick 的频繁触发仍需手动优化。

三、总结

watch 和 watchEffect 各有优劣：watchEffect 简洁自动，适合依赖关系简单的场景；watch 精确可控，适合需要旧值、惰性执行或复杂依赖管理的场景。在性能优化方面，核心原则是减少不必要的依赖收集、控制执行时机、及时清理副作用。结合实际业务场景选择合适的侦听器，并遵循上述优化建议，可以显著提升 Vue 3 应用的运行效率和用户体验。

未经允许不得转载：任鹏个人博客 » Vue 3 中 watch 与 watchEffect 的区别及性能优化建议