在上一篇中我们聊透了 watch 的用法，但 Vue 3 还提供了另一个更“聪明”的侦听工具：watchEffect。如果说 watch 是手动档，需要你明确指定观察对象，那么 watchEffect 就是自动档，它能自动追踪代码中的响应式依赖。
本文将带你深入理解 watchEffect 的运行机制、与 watch 的核心区别，以及在 Vue 3.5 下的最新实践。
一、 什么是 watchEffect？
watchEffect 会立即运行一个函数，同时自动追踪函数内部使用的所有响应式属性。当这些属性发生变化时，函数会重新执行。
核心特性：
- 自动追踪：无需手动指定监听源。
- 立即执行：在创建时会立即触发一次（相当于
watch开启了immediate: true）。 - 代码简洁：依赖逻辑与副作用逻辑高度耦合时，代码量更少。
二、 基础用法与自动追踪
import { ref, watchEffect } from 'vue'const count = ref(0)
const name = ref('Gemini')// 只要 count 或 name 改变，回调就会执行
watchEffect(() => {console.log(`当前计数：${count.value}，当前名称：${name.value}`)
})关键点： watchEffect 只能追踪在同步执行过程中访问到的响应式属性。如果你在 setTimeout 里访问了一个变量，它将无法被追踪。
三、 watch vs watchEffect：该选哪个？
这是面试和开发中最常被问到的问题。
| 特性 | watch | watchEffect |
|---|---|---|
| 依赖声明 | 必须明确指定（手动） | 自动追踪（隐式） |
| 首屏执行 | 默认不执行（可配置 immediate） |
立即执行（无法关闭） |
| 访问旧值 | 可以获取 oldValue |
无法获取旧值 |
| 适用场景 | 需要对比新旧值、监听范围明确 | 多个依赖混杂、只需关注最终逻辑 |
四、 高级进阶：停止与清理
1. 手动停止侦听
与 watch 一样，它返回一个停止函数：
const stop = watchEffect(() => { /* ... */ })// 当满足某个条件时停止监听
if (shouldStop) stop()2. 副作用清理 (Vue 3.5 新特性)
当侦听器被重新触发时，我们需要清理上一次的残留（如未完成的请求）。Vue 3.5 推荐使用 onWatcherCleanup。
import { watchEffect, onWatcherCleanup } from 'vue'watchEffect(() => {const userId = props.idconst controller = new AbortController()fetch(`/api/user/${userId}`, { signal: controller.signal }).then(res => res.json()).then(data => { /* 渲染数据 */ })// 当 id 变化或组件销毁时，自动取消上一次未完成的请求onWatcherCleanup(() => {controller.abort()})
})五、 变体函数：watchPostEffect 与 watchSyncEffect
为了简化 flush 参数的配置，Vue 提供了两个快捷函数：
watchPostEffect：相当于watchEffect(fn, { flush: 'post' })。
- 用途：确保在 Vue 完成 DOM 更新后执行。如果你需要操作更新后的 DOM（例如获取
ref="canvas"的节点），请用这个。
watchSyncEffect：相当于watchEffect(fn, { flush: 'sync' })。
- 用途：同步触发。极少数情况下需要，通常应避免使用以提升性能。
六、 避坑指南：不要在 watchEffect 中“乱跳”
1. 避免在回调中修改依赖源
如果在 watchEffect 里修改了它正在追踪的变量，可能会导致死循环。
const count = ref(0)
watchEffect(() => {count.value++ // ❌ 警告：这会引起无限循环
})2. 只有同步访问会被追踪
watchEffect(() => {// 能够追踪console.log(count.value) setTimeout(() => {// ❌ 无法追踪，因为这是异步执行的console.log(name.value) }, 100)
})七、 总结
- 如果你需要新旧值对比，或者想精确控制哪个变量触发更新，选
watch。 - 如果你有多个响应式变量共同影响一个逻辑，或者单纯想让代码更简洁，选
watchEffect。 - 永远记得在 Vue 3.5 中使用
onWatcherCleanup来管理你的异步任务。