Vue中watchEffect的追踪逻辑

在 Vue3 的

1. watchEffect

复制代码

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

一、核心执行机制

立即执行与自动追踪

• 1. watchEffect

  复制代码
  在初始化时会立即执行一次回调函数，并在执行过程中自动追踪所有被使用的响应式依赖（如
  1. ref

  复制代码
  、
  1. reactive

  复制代码
  对象等）。
  
• 当这些依赖发生变更时，回调函数会重新执行。
  

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

复制代码

动态依赖收集

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

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

复制代码

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

条件判断与副作用控制

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

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

复制代码

副作用清理

• 使用
  1. onInvalidate

  复制代码
  参数处理异步副作用（如定时器、网络请求）
  
• 防止内存泄漏：
  

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

复制代码

性能优化

• 对于高频变更的依赖
  
• 可结合
  1. debounce

  复制代码
  或
  1. throttle

  复制代码
  控制回调触发频率：
  

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

复制代码

三、与 watch 的对比

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

• 自动触发：
  1. watchEffect

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

  复制代码
  使用。
  

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源：https://www.jb51.net/javascript/339848qyr.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！