Vue3 watch和watchEffect在深度监听对象时的执行时机

你是否遇到过这样的情况：使用 watch 监听一个对象，明明修改了对象的某个属性，但回调函数却没有触发？或者不清楚 watch 和 watchEffect 在监听对象时，到底什么时候会执行？本文将深入解析这两个API在深度监听对象时的微妙差异和精确的执行时机，帮你彻底搞懂背后的逻辑。

理解深度监听

在Vue 3的响应式系统中，直接监听一个响应式对象（reactive 或 ref 包裹的对象）时，默认监听的是对象的引用。这意味着，只有当整个对象被替换（引用改变）时，回调才会触发。

const state = reactive({ name: 'Alice', age: 30 });
// 仅监听 `state` 引用是否改变
watch(state, (newValue, oldValue) => {
  console.log('状态更新了！', newValue);
});
// 此操作不会触发上述 watch，因为 `state` 的引用没变
state.name = 'Bob';

要监听对象内部属性的变化，你需要启用深度监听。

一、watch 的深度监听：需要显式声明

watch 是一个精确的、惰性的侦听器。默认情况下，它只跟踪你明确指定的源。要监听对象内部嵌套属性的变化，你必须显式设置 deep: true 选项。

1. 执行时机详解

当你为 watch 设置 { deep: true } 时，其执行时机如下：

1. 初始执行（可选）：默认情况下，watch 是惰性的，即初始化时不会执行回调。你需要额外设置 immediate: true，它才会在创建时立刻执行一次。
2. 后续触发：当被监听的响应式对象内部任何深度的属性发生变更时（例如 state.info.address.city = 'Shanghai'），回调函数会被触发。

2. 代码示例与执行顺序

import { reactive, watch } from 'vue';

const user = reactive({
  name: 'Charlie',
  profile: {
    bio: 'Developer',
    social: {
      github: 'charlie-dev'
    }
  }
});

// 启用深度监听，并在初始化时立即执行一次
watch(
  user,
  (newVal, oldVal) => {
    console.log('深度监听触发！');
    // 注意：在深度监听下，newVal 和 oldVal 通常是同一个对象引用
    // 它们的变化是连续的，很难拿到精确的“旧值”快照
  },
  {
    deep: true,
    immediate: true // 立即执行一次回调
  }
);

// **触发顺序**：
// 1. 立即执行回调（因为 `immediate: true`），打印 “深度监听触发！”。
// 2. 以下操作均会再次触发回调：
console.log('--- 修改嵌套属性 ---');
user.profile.bio = 'Senior Developer'; // 触发
user.profile.social.github = 'new-handle'; // 触发

核心结论：watch 的深度监听是被动触发的，只有当你显式设置 deep: true，它才会去“窥探”对象内部。执行时机严格跟随你指定的源的内部变化。

二、watchEffect 的深度监听：自动依赖跟踪

watchEffect 的行为与 watch 截然不同。它立即执行传入的函数，并自动追踪该函数执行过程中访问的所有响应式属性（无论嵌套多深）。这意味着，watchEffect 天然就支持深度监听，无需任何额外选项。

1. 执行时机详解

watchEffect 的核心是 “依赖收集”。其执行时机如下：

1. 初始执行（必然）：watchEffect 在创建时会立即同步执行一次传入的回调函数。这是它与 watch 最明显的区别之一。
2. 后续触发：在初始执行期间，函数访问了哪些响应式数据，这些数据就成为了它的依赖。当任何一个依赖在后续发生变化时，函数会自动重新执行一次。

2. 代码示例与执行顺序

import { reactive, watchEffect } from 'vue';

const product = reactive({
  id: 1,
  info: {
    title: 'Vue3 Guide',
    details: {
      pages: 200,
      publisher: 'VuePress'
    }
  }
});

// watchEffect 会立即执行
const stop = watchEffect(() => {
  // 这个函数在执行时访问了 `product.info.details.pages`
  // 因此，`pages` 这个深层属性被自动收集为依赖
  console.log(`当前书籍页数: ${product.info.details.pages}`);
});

// 控制台立即输出: “当前书籍页数: 200”

// **后续触发**：
console.log('--- 修改依赖的深层属性 ---');
product.info.details.pages = 250; // 触发重新执行，输出 “当前书籍页数: 250”
```

**核心结论**：`watchEffect` 的深度监听是**主动的、自动的**。你无需指定要监听谁，只要在函数里用到了对象内部的属性，它就会为你管理依赖并在变化时重新运行。

---

## 三、关键差异与陷阱对比

为了更直观地理解，下表总结了两者的核心区别：

| 特性 | `watch` (带 `deep: true`) | `watchEffect` |
| :--- | :--- | :--- |
| **初始执行** | **惰性**。默认不执行，需设置 `immediate: true` | **主动**。创建时立即执行一次 |
| **依赖声明** | **显式**。必须明确指定监听源，并通过 `deep: true` 深入内部 | **隐式**。自动跟踪函数内访问的所有响应式依赖 |
| **获取新旧值** | **可能**。可以接收 `newValue` 和 `oldVal`（但深度监听时往往是同一个引用） | **不可**。无法直接获取变化前后的值，需要自己用闭包等手段保存 |
| **适用场景** | 当你需要**精确控制**何时执行回调，或需要对比新旧值时 | 当你更关心**副作用**（如日志、DOM更新）本身，而非具体的变更来源时 |
| **性能** | 每次触发，Vue需要对对象进行**深度遍历**以比较，对于大对象或复杂嵌套可能带来性能开销 | 同样会深度追踪依赖，但依赖关系在初始执行时就已确定，后续变化是点对点触发的 |

### 常见陷阱

1.  **监听引用未变**：忘记使用 `deep: true` 或 `watchEffect`，只监听了对象引用。
2.  **数组索引修改**：直接通过索引修改数组项（如 `arr[0] = newItem`）在Vue 2中可能不被检测到，但**Vue 3的响应式系统（Proxy）可以完美捕获**此类操作，深度监听会生效。
3.  **响应式丢失**：将响应式对象解构为普通变量后监听，会丢失响应性。
    ```javascript
    // ❌ 错误做法
    const { name, profile } = user; // name, profile 是普通变量
    watch(name, ...); // 不会触发

    // ✅ 正确做法
    watch(() => user.name, ...); // 监听一个 getter 函数
    // 或者
    watchEffect(() => {
      const n = user.name; // 在函数内访问，保持响应性
    });
    ```

---

## 四、最佳实践指南

根据你的具体需求，选择合适的方法：

1.  **需要初始执行和自动依赖收集，且不关心新旧值**：优先使用 `watchEffect`。它代码更简洁，自动管理依赖。
2.  **需要惰性执行、精确控制监听源，或需要对比新旧值**：使用 `watch`，并根据需要配置 `{ deep: true, immediate: true }`。
3.  **优化深度监听性能**：如果对象非常庞大且复杂，**避免无脑使用 `deep: true`**。考虑监听一个**计算属性**，该属性返回你真正关心的值。
    ```javascript
    const activeUserBio = computed(() => user.profile.bio);
    // 这样只监听 `bio` 字符串的变化，而非整个 `user` 对象树
    watch(activeUserBio, (newBio) => {
      // 处理 bio 变化
    });
    ```
4.  **明确监听源**：对于 `watch`，尽量使用函数式返回值作为源，而不是直接监听整个对象。
    ```javascript
    // 更精确、性能更好
    watch(
      () => user.profile.details.pages,
      (newPages, oldPages) => {
        console.log(`页码从 ${oldPages} 变为 ${newPages}`);
      }
    );

理解 watch 和 watchEffect 在深度监听时的不同行为模式，能帮助你编写出更高效、更可预测的Vue组件逻辑。记住：watch 是你手中的精确探针，而 watchEffect 是一个自动化的副作用容器。