vue 深层侦听器

在 Vue 中，深层侦听器（Deep Watcher） 用于监听一个响应式对象（或数组）内部嵌套属性的变化。默认情况下，watch 只会监听对象或数组的引用变化（即是否被重新赋值），而不会监听其内部属性的变化。通过设置 deep: true，可以强制监听所有嵌套属性的变化。

1. 基本用法

监听嵌套对象的变化

const state = reactive({
  user: {
    name: "Alice",
    profile: {
      age: 25,
    },
  },
});

// 默认情况下（deep: false），仅当 state.user 被重新赋值时才会触发
watch(
  () => state.user,
  (newVal) => {
    console.log("user 对象变化:", newVal);
  },
  { deep: false } // 默认值，可省略
);

// 开启深层侦听，监听 user 及其所有嵌套属性的变化
watch(
  () => state.user,
  (newVal) => {
    console.log("user 或其嵌套属性变化:", newVal);
  },
  { deep: true } // ✅ 监听所有嵌套属性
);

监听数组的变化

const list = reactive([1, 2, { id: 3 }]);

watch(
  () => list,
  (newVal) => {
    console.log("数组变化:", newVal);
  },
  { deep: true } // ✅ 监听数组元素及其嵌套属性的变化
);

2. 深层侦听的原理

Vue 的深层侦听是通过递归遍历对象的所有嵌套属性实现的：

1. 当 deep: true 时，Vue 会遍历对象的所有层级，对每个属性建立响应式依赖。
2. 如果任何嵌套属性发生变化（如 state.user.profile.age = 26），就会触发侦听器。

注意：

• 深层侦听会带来一定的性能开销，因为 Vue 需要递归遍历整个对象。
• 对于大型对象或频繁更新的数据，谨慎使用 deep: true。

3. 替代方案：精确监听某个嵌套属性

如果不需要监听整个对象的所有变化，而是只关心某个特定嵌套属性，可以直接在 watch 中指定该属性：

watch(
  () => state.user.profile.age, // ✅ 只监听 age 的变化
  (newAge) => {
    console.log("age 变化:", newAge);
  }
);

优点：

• 更高效，避免不必要的深层遍历。
• 代码更清晰，明确知道监听的目标。

4. 深层侦听 + 立即执行（immediate）

可以结合 immediate: true，使侦听器在初始化时立即执行一次：

watch(
  () => state.user,
  (newVal) => {
    console.log("user 或其嵌套属性变化:", newVal);
  },
  { deep: true, immediate: true } // ✅ 初始化时立即执行
);

5. 在 watchEffect 中自动追踪依赖

watchEffect 会自动追踪其内部使用的响应式依赖，包括嵌套属性：

watchEffect(() => {
  console.log("user.profile.age:", state.user.profile.age); // ✅ 自动追踪嵌套属性
});

特点：

• 不需要手动指定 deep: true，Vue 会自动追踪所有用到的依赖。
• 但无法像 watch 那样精确控制新旧值的比较。

6. 注意事项

(1) 避免在侦听器中直接修改依赖数据

watch(
  () => state.user,
  (newVal) => {
    state.user.profile.age++; // ❌ 可能导致无限循环
  },
  { deep: true }
);

问题：

• 修改 state.user.profile.age 会再次触发侦听器，导致无限循环。
• 解决方案：使用 { flush: 'sync' } 或改用 watchPostEffect（Vue 3）。

(2) 性能优化

• 如果只需要监听特定属性，避免使用 deep: true，而是直接监听目标属性。
• 对于大型对象，考虑使用 shallowRef + 手动管理深层更新。

7. 总结

最佳实践：

• 如果只需要监听某个嵌套属性，直接监听它（如 () => obj.nested.prop）。
• 如果必须监听整个对象的所有变化，再使用 deep: true。
• 在 Vue 3 中，watchEffect 可以自动追踪依赖，适合复杂逻辑。

这样既能保证功能正确，又能避免不必要的性能开销。