Vue Composition API怎么使用 watchEffect 自动追踪依赖变化-Vue.js-PHP中文网

watcheffect 是 vue 3 中自动追踪响应式依赖并执行副作用的工具，无需手动指定监听目标，通过 getter 中的 track() 建立依赖关系，set 时 trigger() 重跑回调；支持 oninvalidate 清理、flush 控制执行时机、stop() 手动停止；注意异步依赖不被追踪、无新旧值参数、默认立即执行、对 reactive 为浅层追踪。

vue composition api怎么使用 watcheffect 自动追踪依赖变化

watchEffect 是 Vue 3 Composition API 中用于自动追踪响应式依赖并执行副作用的核心工具。它不需手动指定监听目标，只要在回调函数里读取了 ref 或 reactive 数据，Vue 就会自动建立追踪关系，数据一变，函数立刻重跑。

自动追踪是怎么发生的？

当你调用 watchEffect(() => { ... })，Vue 会立即执行这个函数，并在执行过程中“监听”所有被访问的响应式属性（比如 count.value、user.name）。这些访问触发 getter，进而调用 track()，把当前 effect 和对应属性关联起来。后续只要这些属性被 set，就会触发 trigger()，重新运行整个回调。

这意味着：

不用写 watch(count, ...) 这类显式声明
函数里用了哪些响应式变量，就追踪哪些——哪怕嵌套多层或动态计算，也自动覆盖
如果某次执行没读到某个 ref（比如条件分支未命中），那个 ref 就不会被追踪，变化也不会触发重跑

常见用法与实用技巧

基础用法简洁直接：

Vue-router参考手册

Vue-router参考手册下载

下载

watchEffect(() => {<br>  document.title = `计数：${count.value}`;<br>});

它会在组件挂载时立刻执行一次，之后 count 变化时再执行。更进一步可以：

用 onInvalidate 清理上一轮未完成的异步操作，比如取消 pending 的请求或清除定时器
传入 flush: 'post' 让回调在 DOM 更新后执行，适合需要操作真实 DOM 的场景
调用返回的 stop() 函数主动停掉监听，防止组件卸载后仍执行（尤其配合异步时很重要）

要注意的几个关键点

watchEffect 的自动性很省心，但也容易踩坑：

异步代码里的依赖不会被追踪：await 后面读取的响应式数据，不在初始 track 阶段，所以改了也不会触发重跑
不能拿到新旧值：它只管“变了就重来”，不提供类似 watch 的 (newVal, oldVal) 参数
默认立即执行：和 watch 默认惰性不同，第一次渲染就跑，这点要结合业务判断是否合理
深度对象要小心：watchEffect 对 reactive 对象是浅层追踪，改深层属性（如 user.profile.age）能触发，但替换整个 user 对象才真正“触发依赖更新”