vue watch vs. watchEffect 区别

在 Vue 3 中，watch 和 watchEffect 均用于响应式监听数据变化，但二者在依赖收集方式、执行时机、参数传递、适用场景等方面存在显著差异，具体对比如下：

1. 依赖收集方式

• watch
  需显式指定要监听的数据源（如 ref、reactive 对象属性、getter 函数等），仅追踪这些明确声明的依赖。
  示例：

  const count = ref(0);
  watch(count, (newVal) => {
    console.log('count 变化:', newVal); // 仅监听 count 的变化
  });
  

• watchEffect
  自动收集回调函数内部使用的所有响应式依赖，无需手动指定。
  示例：

  const count = ref(0);
  const double = ref(0);
  watchEffect(() => {
    double.value = count.value * 2; // 自动追踪 count 和 double 的依赖
    console.log('自动追踪的依赖:', count.value, double.value);
  });
  

2. 执行时机

• watch

  • 惰性执行：默认在依赖变化时触发回调，除非配置 immediate: true 强制首次立即执行。
  • 精确控制：仅在指定数据源变化时触发，避免不必要的计算。

• watchEffect

  • 立即执行：在组件挂载时自动执行一次，以捕获初始依赖。
  • 动态依赖：若回调中新增依赖（如条件语句中访问的属性），后续变化会触发重新执行。
    示例：

  const enabled = ref(false);
  const counter = ref(0);
  watchEffect(() => {
    if (enabled.value) {
      console.log('动态依赖:', counter.value); // 仅当 enabled 为 true 时追踪 counter
    }
  });
  enabled.value = true; // 触发首次执行，开始追踪 counter
  counter.value++; // 触发重新执行
  

3. 参数传递

• watch
  回调函数接收新旧值作为参数，便于对比变化。
  示例：

  watch(count, (newVal, oldVal) => {
    console.log('新值:', newVal, '旧值:', oldVal);
  });
  

• watchEffect
  回调函数无参数，仅通过闭包访问当前值。若需清理副作用（如取消异步请求），可通过 onInvalidate 注册清理函数。
  示例：

  watchEffect((onInvalidate) => {
    const token = fetchData(); // 模拟异步请求
    onInvalidate(() => {
      cancelRequest(token); // 依赖变化时取消未完成的请求
    });
  });
  

4. 适用场景

• watch

  • 需要精确控制监听目标（如特定属性、计算属性）。
  • 需访问新旧值进行逻辑判断（如表单验证、状态同步）。
  • 监听复杂数据结构时，可配合 deep: true 深度监听嵌套属性。

• watchEffect

  • 代码简洁，适合自动追踪依赖的场景（如异步数据获取、UI 更新）。
  • 动态依赖较多或依赖关系复杂时，避免手动维护依赖列表。
  • 需立即执行初始逻辑（如初始化数据加载）。

5. 性能与调试

• watch

  • 深度监听（deep: true）可能带来性能开销，需谨慎使用。
  • 调试时可通过 onTrack 和 onTrigger 追踪依赖收集和触发过程。

• watchEffect

  • 自动追踪依赖可能隐式引入意外依赖，需注意避免副作用泄漏。
  • 异步回调中，仅第一个 await 前的依赖会被追踪，后续依赖需手动处理。

总结对比表

选择建议

• 使用 watch 当：

  • 需要监听特定属性或计算属性。
  • 需比较新旧值执行逻辑。
  • 监听大型对象时需控制深度监听。

• 使用 watchEffect 当：

  • 依赖关系简单且需自动追踪。
  • 需立即执行初始逻辑（如数据加载）。
  • 动态依赖较多，避免手动维护依赖列表。