watcheffect 不支持配置项“按需追踪”，仅能通过条件判断实现“按需执行”；依赖仍会被自动收集，副作用由条件控制；需用 computed 封装受控 getter 避免无效依赖；配合 oninvalidate 清理异步任务；可调用 stop 彻底停止监听。
watchEffect 本身不支持像 watch 那样通过配置项（如 immediate、deep 或条件过滤）来“按需追踪”，但它可以通过在回调函数内部加条件判断，实现逻辑上的“按需执行副作用”，从而达到实际的按需响应效果。关键在于：依赖依然会被自动收集，但副作用是否执行，由你写的条件控制。
依赖照常收集，副作用按条件触发
watchEffect 在首次执行时会完整运行回调函数，并在此过程中访问到的所有响应式数据都会被纳入依赖追踪范围。即使你在函数里写了 if 判断，只要该响应式值在某次执行中被读取过，它就成为依赖 —— 后续变化仍会触发整个函数重跑。所以“按需追踪”实质是“按需执行”，不是“按需监听”。
- 比如
watchEffect(() => { if (show.value) fetchUser(id.value) })，show和id都会被追踪，哪怕show为 false，id变了也会触发函数重新执行（只是里面什么也不做） - 这意味着不能靠条件语句“屏蔽”某个 ref 的依赖收集，只能控制它是否参与副作用逻辑
用 ref 控制是否真正执行副作用
如果希望某个响应式状态变化完全不触发副作用（连函数都不执行），就不能把它写进 watchEffect 回调里。可行做法是把真正需要响应的数据，封装成一个受控的 getter：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义一个计算属性或普通函数，只在满足条件时返回目标值：
const targetId = computed(() => enabled.value ? id.value : undefined) - 再让 watchEffect 监听这个受控值：
watchEffect(() => { if (targetId.value) fetch(targetId.value) }) - 这样，当
enabled为 false 时，targetId不再依赖id，id变化就不会触发 watchEffect
配合 onInvalidate 清理未完成的异步操作
条件判断常用于避免重复请求或无效操作，但要注意：上一次异步还没结束，新一次就来了，容易造成竞态。这时要用 onInvalidate 主动取消前序任务：
watchEffect((onInvalidate) => { const controller = new AbortController(); onInvalidate(() => controller.abort()); fetch(`/api/user/${userId.value}`, { signal: controller.signal }).then(...); });- 每次 watchEffect 重跑或停止时，
onInvalidate回调都会被调用，确保旧请求被中断 - 尤其适合“搜索关键词变化时取消上一次请求”的场景
手动停止 watchEffect 实现彻底退出追踪
当业务状态进入不可响应阶段（例如组件卸载、表单提交成功后禁用监听），最干净的方式是调用 stop 函数：
const stop = watchEffect(() => { if (isActive.value) loadData() });- 在合适时机（如
onUnmounted或提交成功后）调用stop() - 停止后，所有依赖不再被追踪，也不会再触发任何执行
- 注意：stop 后无法恢复，如需重启需重新调用 watchEffect
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
