watchEffect 通过自动追踪回调中读取的响应式数据实现多依赖联动，任意依赖变化即重执行；支持内部条件判断、onInvalidate 防抖/取消请求，且副作用应内聚、计算逻辑宜抽至 computed。

watchEffect 处理多个响应式依赖的联动，核心在于“自动追踪”——只要在回调函数里读取了哪些响应式数据，它就自动监听哪些。不需要手动列数组、也不用担心遗漏，变量一变，逻辑立刻重跑。

直接读取多个 ref 或 reactive 字段

把需要联动的响应式值，在 watchEffect 回调里自然使用即可。Vue 会静态分析并建立依赖关系。

• 例如同时用到 searchKey.value、filterType.value 和 form.status，watchEffect 就自动监听这三个
• 任意一个变化，整个回调都会重新执行，天然实现“任一动、全联动”
• 写法简洁，没有顺序约束，也不用配新旧值参数

配合条件判断做精准联动响应

不是所有变化都要触发全部逻辑。可以在回调内部加 if 判断，只对关心的组合或状态做处理。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

• 比如仅当 form.type === 'company' 时才清空 form.taxId
• 或只在 searchKey.value 非空时才调用搜索接口
• 避免无效执行，也方便后续扩展分支逻辑

用 onInvalidate 实现防抖与请求取消

联动常伴随异步操作（如搜索、校验），watchEffect 自带 onInvalidate，适合清理上一次未完成的任务。

立即学习“前端免费学习笔记（深入）”；

• 每次新触发前，onInvalidate 会先被调用，可在此 abort 上一个 fetch 请求
• 结合 setTimeout + clearTimeout，轻松实现防抖：新触发时清除旧定时器，只保留最后一次
• 比手动维护 timerId 或 AbortController 更轻量、更契合响应式生命周期

避免副作用污染，保持逻辑内聚

watchEffect 的回调是副作用函数，应专注“对外产生影响”，比如发请求、改 DOM、更新另一个 ref。不要在里面做复杂计算或状态聚合。

• 把字段组合、格式转换等逻辑抽到 computed 中，watchEffect 只消费结果
• 例如用 computed 得到 shouldSearch 布尔值，watchEffect 只监听它再决定是否查数据
• 这样职责清晰，也利于单元测试和复用