Vue.js 3 响应式系统中 watch 与 ref/reactive 的深度解析

前言

在 Vue.js 3 的响应式系统中，watch 和 ref/reactive 是开发者日常开发中频繁使用的核心 API。然而，在实际应用中，开发者经常会遇到一些看似不符合预期的行为。本文将深入剖析 Vue.js 3 响应式系统的工作原理，帮助开发者更好地理解和使用这些 API。

响应式基础与引用替换问题

Vue 3 的响应式系统基于 Proxy 实现，当我们使用 reactive() 创建一个响应式对象时，Vue 会为这个对象创建一个代理。这个代理会跟踪所有属性的访问和修改，从而实现响应式更新。

常见误区：许多开发者会尝试直接替换整个响应式对象的引用，例如：

const student = reactive({name: "Jon", score: 90});
student = {name: "Stewie", score: 0}; // 这将导致响应式丢失

这种操作会导致响应式丢失，因为新的对象没有被 reactive() 包装。正确的做法是使用 Object.assign 来合并新对象的属性：

Object.assign(student, {name: "Stewie", score: 0});

或者使用 ref 来包装对象：

const student = ref({name: "Jon", score: 90});
student.value = {name: "Stewie", score: 0}; // 这样能保持响应式

watch API 的深度监听机制

Vue 3 的 watch API 提供了对响应式数据变化的监听功能。默认情况下，watch 只对源对象的引用变化做出响应，不会深度监听嵌套属性的变化。

示例场景：

const teacher = reactive({name: "Lois", salary: 5000});

watch(teacher, (newVal) => {
  console.log("Teacher changed:", newVal);
});

在这种情况下：

1. 直接修改 teacher.name 或 teacher.salary 不会触发 watch 回调
2. 替换整个 teacher 对象（如 teacher = {...}）会触发回调

如果需要监听嵌套属性的变化，必须显式设置 deep: true 选项：

watch(teacher, (newVal) => {
  console.log("Teacher changed:", newVal);
}, {deep: true});

最佳实践建议

1. 明确数据结构的可变性：如果数据结构会频繁整体替换，考虑使用 ref；如果主要是修改属性，使用 reactive 更合适。

2. 合理使用 watch 选项：

   • 对于简单数据类型，无需 deep 选项
   • 对于对象类型，根据是否需要监听嵌套属性变化决定是否使用 deep
   • 考虑使用 watchEffect 简化代码

3. 性能考量：deep watch 会对整个对象进行深度遍历，可能带来性能开销，应谨慎使用。

4. 代码可维护性：在团队协作中，应明确约定响应式数据的使用方式，避免混用 ref 和 reactive 造成混淆。

总结

理解 Vue 3 响应式系统的工作原理对于编写高效、可维护的代码至关重要。通过本文的分析，我们可以看到：

1. reactive() 创建的响应式对象不应直接替换引用
2. watch 默认不深度监听对象属性变化
3. 根据实际需求选择合适的响应式 API 和 watch 配置

掌握这些核心概念，开发者可以避免常见的响应式陷阱，编写出更健壮的 Vue 应用。