vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue watchEffect的追踪逻辑

Vue中watchEffect的追踪逻辑介绍

作者:堕落年代

这篇文章主要介绍了Vue中watchEffect的追踪逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue中watchEffect的追踪逻辑

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

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

一、核心执行机制

立即执行与自动追踪

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

动态依赖收集

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

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

条件判断与副作用控制

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

副作用清理

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

性能优化

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

三、与 watch 的对比

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

总结

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

您可能感兴趣的文章:
阅读全文