Vue的watchEffect的追踪逻辑

在 Vue3 的 watchEffect 中，回调函数的行为取决于响应式依赖的追踪结果，但确实存在需要开发者主动处理逻辑的场景。以下是具体特性与处理逻辑的关键点：

一、核心执行机制

1. 立即执行与自动追踪
   watchEffect 在初始化时会立即执行一次回调函数，并在执行过程中自动追踪所有被使用的响应式依赖（如 ref、reactive 对象等）。当这些依赖发生变更时，回调函数会重新执行。

   const count = ref(0);
   watchEffect(() => {
     console.log(`当前值：${count.value}`);
   });
   // 初始化立即输出：当前值：0
   count.value++; // 输出：当前值：1
   

2. 动态依赖收集
   每次回调执行时，Vue 会重新收集依赖。如果回调中新增了响应式依赖，后续变更也会触发回调：

   const enabled = ref(false);
   watchEffect(() => {
     if (enabled.value) {
       console.log("启用状态：", enabled.value); // 只有启用时才会追踪 enabled
     }
   });
   enabled.value = true; // 触发回调，输出：启用状态：true
   

二、开发者需要处理的逻辑

3. 条件判断与副作用控制
   即使依赖未变化，回调函数仍可能因其他原因执行（如组件重新渲染）。开发者需通过条件语句过滤无效逻辑：

   watchEffect(() => {
     if (someCondition.value) { // 手动控制逻辑执行条件
       fetchData();
     }
   });
   

4. 副作用清理
   使用 onInvalidate 参数处理异步副作用（如定时器、网络请求），防止内存泄漏：

   watchEffect((onInvalidate) => {
     const timer = setInterval(() => {
       console.log("轮询中...");
     }, 1000);
     onInvalidate(() => clearInterval(timer)); // 清理副作用
   });
   

5. 性能优化
   对于高频变更的依赖，可结合 debounce 或 throttle 控制回调触发频率：

   import { debounce } from 'lodash-es';
   watchEffect(debounce(() => {
     searchAPI(keyword.value);
   }, 300));
   

三、与 watch 的对比

四、总结

• 自动触发：watchEffect 的回调函数由依赖变更触发，但开发者需主动处理条件过滤、副作用清理和性能优化。
• 灵活性与风险：虽然省去了手动声明依赖的步骤，但过度依赖自动追踪可能导致不必要的计算（如追踪到非核心依赖）。
• 最佳实践：适合处理多依赖联动的副作用逻辑（如 UI 同步、日志记录），复杂场景建议结合 watch 使用。