Vue 侦听 属性的 getter 函数

在 Vue 中，不能直接侦听响应式对象的属性值（如 obj.property），而需要使用返回该属性的 getter 函数（如 () => obj.property），这主要与 Vue 的响应式系统实现机制和 JavaScript 的限制有关。以下是具体原因：

1. JavaScript 对象的限制

• 在 JavaScript 中，直接传递一个属性引用（如 obj.property）时，你传递的是该属性的当前值，而不是对属性的引用。Vue 无法自动追踪这个值的变化，因为它只是一个静态值。
• 例如：

  const obj = reactive({ count: 0 });
  const value = obj.count; // 这里只是读取了当前值 0
  // 后续 obj.count 变化时，value 仍然是 0，没有绑定关系
  

2. Vue 的响应式依赖收集

• Vue 的响应式系统（如 watch 或 computed）需要在数据变化时重新执行回调函数。为了实现这一点，它需要在读取数据时收集依赖。
• 当你使用 getter 函数（如 () => obj.property）时，Vue 会在函数执行时（即读取 obj.property 时）捕获当前的响应式依赖，从而建立绑定关系。
• 直接传递属性值无法触发这种依赖收集。

3. Getter 函数的动态性

• Getter 函数（如 () => obj.property）是一个动态操作，每次执行时都会重新读取属性的当前值。Vue 可以通过拦截这个读取操作（通过 Proxy 或 Object.defineProperty）来追踪变化。
• 例如：

  watch(
    () => obj.count, // 每次 obj.count 被读取时，Vue 会记录这个依赖
    (newVal) => {
      console.log('count changed:', newVal);
    }
  );
  

4. 深层嵌套属性的侦听

• 如果直接侦听 obj.property，Vue 无法区分你是想侦听 property 本身还是 obj 的变化。而通过 getter 函数，可以明确指定侦听的目标：

  // 侦听 obj.property 的变化
  watch(() => obj.property, (newVal) => { ... });
  
  // 侦听整个 obj 的变化（包括新增/删除属性）
  watch(obj, (newObj) => { ... }, { deep: true });
  

5. 与 computed 的设计一致性

• Vue 的 computed 属性也要求通过函数返回依赖值，这样可以在依赖变化时自动重新计算。watch 的 getter 函数设计与之保持一致，简化内部实现。

替代方案：直接传递 ref

• 如果是 ref 对象，可以直接传递 .value 的引用（因为 ref 本身是一个包装对象，Vue 内部通过 value 属性实现响应式）：

  const count = ref(0);
  watch(count, (newVal) => { ... }); // 等价于 watch(() => count.value, ...)
  

• 但对于普通响应式对象（reactive），仍然需要 getter 函数。

总结

Vue 要求通过 getter 函数侦听属性值，是因为：

1. JavaScript 无法直接传递属性引用。
2. Getter 函数允许 Vue 在运行时捕获依赖。
3. 这种设计保持了响应式系统的统一性和可预测性。

如果需要侦听嵌套属性，还可以使用字符串路径（如 watch(obj, 'property', ...)，但 getter 函数是更推荐的方式。