watchEffect侦听器如何自动追踪响应式依赖的原理与方法

先解答一个开发者常遇到的疑问：watchEffect 究竟是如何实现“自动”追踪响应式依赖的？

简单来说，你无需手动声明变量列表，也无需配置 immediate: true——因为它在定义时会立即执行一次，同时默默记录函数内部实际读取到的每个响应式属性。一旦这些属性发生变动，它便会自动再次执行。整个机制基于 Vue 内部的 getter/setter 拦截，对开发者而言几乎是无感的。

但有一个关键点：它并非扫描变量名称，而是在运行时实际“读取”了什么。例如，如果你写了 count.value 和 user.profile.name，它只会追踪这两个；如果存在条件分支 if (show) { data.list }，那么只有当 show 为 true 时，data.list 才会被纳入依赖。普通变量、常量以及非响应式对象的属性，即使出现在同一行，也不会被追踪。此外，赋值操作（如 count.value = 5）本身不会触发依赖收集——只有读取操作才会收集。

它仅追踪实际被使用的响应式值

回到刚才的逻辑，这种方式的好处在于节省性能：你只关注使用到的部分，未用到的更改不会触发回调。但这也意味着需要注意条件分支中的依赖可能“动态”出现或消失。

首次运行即刻生效，后续变化自动响应

定义 watchEffect 时，函数会同步执行一次，这相当于内置了 immediate: true。因此非常适合用于初始化请求、设置定时器、同步 DOM 状态等场景。当组件卸载时，该侦听器会自动停止，无需在 onUnmounted 中手动清理。如果确实需要跳过首次执行，通常需要借助 onInvalidate 配合逻辑控制，但实际需求较少。

异步任务需防范竞态，利用 onInvalidate 清理上一轮

真正需要警惕的是异步场景，例如输入搜索、滚动监听这类高频触发的情况。很容易出现“旧请求尚未返回，新请求又已发出”，导致页面显示错误的数据。此时 onInvalidate 回调就派上用场了——它会在下一次执行前自动调用上一次注册的清理函数。你可以在函数开头调用 onInvalidate(() => clearTimeout(timer)) 来取消定时器，或者在发起 fetch 时使用 AbortController，调用 abort() 取消旧请求。有一个细节：清理函数必须在异步操作启动前注册，否则可能无法正确清理正在运行的任务。

何时应该改用 watch？

watchEffect 虽然简洁，但并非万能。以下几种情况改用 watch 更合适：

• 需要对比新旧值，例如只在值从空变为非空时触发；
• 需要监听深层嵌套对象的任意字段变化（需要 deep: true），watchEffect 不支持深层监听；
• 依赖来源过于分散，或者计算属性的 getter 中包含异常判断逻辑，用 watch 更容易控制；
• 如果只是单纯将响应式数据加工成另一个响应式值，那么优先考虑 computed，语义更清晰。

总之，watchEffect 是为“自动运行”的场景设计的，而 watch 提供了更多精细化控制的手段。两者配合使用，才能编写出既简洁又可靠的响应式逻辑。