Vue中watchEffect的追踪逻辑介绍

Vue中watchEffect的追踪逻辑

在 Vue3 的 watchEffect 中，回调函数的行为取决于响应式依赖的追踪结果，但确实存在需要开发者主动处理逻辑的场景。

以下是具体特性与处理逻辑的关键点：

一、核心执行机制

立即执行与自动追踪

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

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

动态依赖收集

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

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

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

条件判断与副作用控制

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

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

副作用清理

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

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

性能优化

对于高频变更的依赖
可结合 debounce 或 throttle 控制回调触发频率：

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

三、与 watch 的对比

特性	watchEffect	watch
依赖声明	自动收集	手动指定
执行时机	立即执行	默认惰性（可配置 immediate: true）
适用场景	副作用逻辑、多依赖联动	精准监听、新旧值对比
性能影响	可能因依赖动态变化产生更多计算	更可控