Vue 3 提供了 watch 和 watchEffect 两种强大的响应式工具，它们功能相似却各有侧重。本文将通过实例讲解它们的区别，助您在 Vue 3 项目中灵活运用。
watch函数：精准监控
watch 用于监控特定响应式数据的变化。当您需要对某个特定值的变更做出反应时，watch 是理想选择。
示例：
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});
每次 count 更新，watch 函数都会将新旧值打印到控制台。
立即学习“前端免费学习笔记（深入）”；
watchEffect函数：自动追踪依赖
不同于 watch，watchEffect 会自动追踪其回调函数中访问的所有响应式属性。当您需要监控多个依赖项，且无需显式指定时，watchEffect 非常实用。
示例：
import { ref, watchEffect } from 'vue';
const count = ref(0);
const doubleCount = ref(0);
watchEffect(() => {
doubleCount.value = count.value * 2;
console.log(`doubleCount is now ${doubleCount.value}`);
});
无需指定依赖项，watchEffect 会自动追踪 count 的变化，并更新 doubleCount。
watch和watchEffect的关键区别
| 特性 | watch |
watchEffect |
|---|---|---|
| 监控数据 | 指定的响应式数据 | 自动追踪所有依赖项 |
| 依赖项控制 | 显式指定 | 自动 |
| 最佳应用场景 | 复杂数据监控，精确控制依赖 | 简单响应式效果，自动依赖追踪 |
- 何时使用哪个？
- 使用
watch：当您需要精确控制要监控的属性时，例如监控表单输入、复杂对象属性等。 使用{ deep: true }选项可以监控对象内部属性的变更。 - 使用
watchEffect：当您需要自动追踪代码块中多个反应源，并根据这些源的变化执行某些操作时，例如计算依赖多个变量的总价。
- 实际应用案例
案例一：表单数据实时同步到 API
使用 watch 实时将表单数据同步到 API，确保数据的一致性。 对于嵌套对象，使用 { deep: true } 选项至关重要。
案例二：计算依赖多个反应式数据的总价
使用 watchEffect 计算依赖价格和数量的总价，无需显式指定依赖项。
- 常见陷阱和最佳实践
-
避免过度使用
watchEffect： 在复杂场景中过度使用watchEffect可能导致性能问题。 -
记住
{ deep: true }： 监控嵌套对象时，务必使用{ deep: true }选项。 -
最佳实践： 针对性地使用
watch进行精确监控；使用watchEffect处理简单的响应式效果。
- 结论
watch 和 watchEffect 都是 Vue 3 响应式系统中的重要组成部分。 理解它们的区别，并根据实际情况选择合适的工具，将显著提升您的开发效率和代码质量。
希望本文对您有所帮助！ 关注我了解更多 Vue 和前端开发技巧。 祝您编程愉快！
