vue侦听器监视属性的getter函数的原理解析

在 Vue 中，侦听器（watch）能够监视属性的 getter 函数（如 () => obj.property），而不是直接监视属性值（如 obj.property），这主要得益于 Vue 的响应式依赖收集机制和 JavaScript 的动态执行特性。以下是详细解释：

1. Getter 函数允许动态依赖收集

Vue 的响应式系统（基于 Proxy 或 Object.defineProperty）会在数据被读取时收集依赖（即谁读取了数据，谁就依赖这个数据）。

• Getter 函数的作用：
  当你传递一个 getter 函数（如 () => obj.property）给 watch 时，Vue 会在每次执行这个函数时（即每次侦听器检查变化时）读取 obj.property 的值。

  • 在读取 obj.property 的过程中，Vue 的响应式系统会捕获这个读取操作，并将当前侦听器（watch 的回调函数）注册为 obj.property 的依赖。
  • 后续当 obj.property 发生变化时，Vue 会通知所有依赖它的侦听器，触发回调。

• 直接传递属性值的问题：
  如果你直接传递 obj.property（而不是函数），Vue 只能在初始化时读取一次这个值，无法建立动态的依赖关系。后续 obj.property 的变化不会触发侦听器，因为依赖收集已经错过了。

示例：

const obj = reactive({ count: 0 });

// ✅ 正确：通过 getter 函数动态收集依赖
watch(() => obj.count, (newVal) => {
  console.log('count changed:', newVal);
});

// ❌ 错误：直接传递属性值，无法建立依赖
watch(obj.count, (newVal) => { ... }); // 不会生效！

2. Getter 函数是“懒执行”的

Getter 函数只在以下两种情况下被调用：

1. 初始依赖收集阶段：Vue 会执行一次 getter 函数，读取当前值并记录依赖。
2. 后续变化触发阶段：当依赖的属性变化时，Vue 会再次执行 getter 函数，比较新旧值，决定是否触发回调。

这种设计避免了不必要的计算，只有真正需要时才读取值。

3. 与 computed 的依赖收集机制一致

Vue 的 computed 属性也是通过 getter 函数工作的：

• 计算属性会在其依赖的响应式数据变化时重新计算。
• watch 的 getter 函数逻辑与之类似：通过函数执行来追踪依赖，并在依赖变化时执行回调。

这种一致性降低了学习成本，也使得 Vue 的响应式系统更加统一。

4. 支持复杂逻辑的侦听

Getter 函数不仅可以是简单的属性访问（如 () => obj.property），还可以包含任意逻辑：

watch(
  () => obj.a + obj.b, // 侦听多个属性的组合结果
  (sum) => {
    console.log('sum changed:', sum);
  }
);

这种灵活性是直接传递属性值无法实现的。

5. 底层实现：响应式系统的拦截

Vue 2 和 Vue 3 的响应式系统虽然实现方式不同，但核心逻辑一致：

• Vue 2：通过 Object.defineProperty 劫持属性的 getter，在读取属性时收集依赖。
• Vue 3：通过 Proxy 拦截属性的读取操作（get 陷阱），同样在读取时收集依赖。

无论是哪种方式，依赖收集必须发生在属性被读取时，而 getter 函数正是提供了这个“读取”的时机。

为什么不能直接监视 obj.property？

1. JavaScript 的限制：
   直接传递 obj.property 时，你传递的是属性的当前值（如 0），而不是对属性的引用。Vue 无法从值 0 反推出它来自 obj.property，因此无法建立依赖关系。

2. 静态值无法触发更新：
   即使 obj.property 变化了，watch 仍然持有旧的静态值（如 0），不知道需要重新运行。

特殊情况：ref 的例外

对于 ref 对象，可以直接传递 .value 的引用（如 watch(count, ...)），因为 ref 本身是一个响应式包装对象，Vue 内部通过 value 属性的 getter/setter 实现依赖收集。但这是 ref 的特殊设计，不适用于普通响应式对象（reactive）。

总结

Vue 的 watch 通过 getter 函数 监视属性变化，是因为：

1. 依赖收集需要动态读取：Getter 函数在执行时会触发响应式数据的读取，从而让 Vue 捕获依赖。
2. JavaScript 无法直接传递属性引用：必须通过函数调用来“间接”访问属性。
3. 与 computed 设计一致：保持响应式系统的统一性。
4. 支持复杂逻辑：Getter 函数可以包含任意表达式。

这种机制是 Vue 响应式系统的核心特性之一，确保了数据变化能够精准触发更新。