Vue 3 watchEffect vs watch

以下是关于 Vue 3 中 watchEffect 的详细解析及其与 watch 的对比，结合核心特性和使用场景进行说明：

🔍 一、watchEffect 核心机制

1. 自动依赖追踪

   • 原理：watchEffect 会立即执行传入的函数，并自动追踪函数内部访问的所有响应式依赖（如 ref、reactive 对象的属性）。当这些依赖变化时，函数会自动重新执行。
   • 示例：

     const count = ref(0);
     watchEffect(() => {
       console.log(`Count updated: ${count.value}`); // 自动追踪 count.value
     });
     

2. 立即执行

   • 与 watch 不同，watchEffect 的回调函数会在组件初始化时立即执行一次，无需配置 immediate: true。

3. 副作用清理

   • 通过 onCleanup 参数注册清理函数，用于取消异步操作或释放资源（如下次执行前清除定时器）：

     watchEffect((onCleanup) => {
       const timer = setInterval(() => {}, 1000);
       onCleanup(() => clearInterval(timer)); // 清理副作用
     });
     

4. 执行时机控制

   • 支持配置 flush 选项：
     • pre（默认）：组件更新前执行。
     • post：组件更新后执行（适合操作 DOM）。
     • sync：同步执行（慎用，可能阻塞渲染）。

⚖️ 二、watchEffect vs watch 对比

🎯 三、适用场景分析

1. watchEffect 更合适的场景

   • 数据联动更新：多个响应式变量共同影响结果（如实时计算表单总值）。
   • 异步操作：自动追踪查询参数变化并发送请求：

     watchEffect(async () => {
       const res = await fetch(`/api?q=${searchKey.value}`);
       data.value = await res.json();
     });
     

   • DOM 更新后操作：使用 flush: 'post' 确保操作已渲染的 DOM。

2. watch 更合适的场景

   • 表单验证：需对比新旧值（如密码强度变化）。
   • 深度监听对象：显式配置 { deep: true } 并避免引用陷阱。
   • 性能敏感场景：监听特定属性减少不必要的触发。

⚙️ 四、高级用法与注意事项

1. 调试工具

   • 使用 onTrack（依赖被追踪时触发）和 onTrigger（依赖变化时触发）调试依赖关系：

     watchEffect(
       () => { /* 逻辑 */ },
       {
         onTrack(e) { debugger; },
         onTrigger(e) { debugger; }
       }
     )
     

2. 停止监听

   • 调用返回的停止函数以释放资源（如组件卸载时）：

     const stop = watchEffect(() => {});
     onUnmounted(() => stop()); // 避免内存泄漏
     

3. 避免无限循环

   • 禁止在回调中同步修改依赖数据，否则可能触发循环执行：

     // ❌ 错误示例：可能无限循环
     watchEffect(() => {
       count.value++; 
     });
     

💎 五、最佳实践总结

1. 优先使用精确监听
   • 当明确依赖项时，用 watch 代替 watchEffect 以提升性能。
2. 合理控制深度监听
   • 对大型对象使用 () => obj.key 而非 { deep: true }。
3. 及时清理副作用
   • 异步操作务必通过 onCleanup 避免内存泄漏。
4. 组合式 API 优化
   • 将复杂逻辑拆分为多个 watchEffect 或结合 computed 使用。

场景选择指南：

• 需要自动追踪多个依赖且立即执行 → watchEffect；
• 需要监听特定数据、对比新旧值或精细控制性能 → watch。

通过理解两者差异及适用场景，可显著提升代码可维护性与性能表现。