watchEffect() 自动追踪依赖的副作用
最后更新：2026-10-22
watchEffect() 自动追踪依赖的副作用
watchEffect() 立即执行传入的函数，并自动追踪其中用到的响应式数据：依赖变化即重新执行。
| 分组 | 响应式·核心 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
watchEffect(() => {
document.title = `${count.value} 次点击` // 自动追踪 count
})
// 需要清理时接收 onCleanup 函数
watchEffect((onCleanup) => { const t = setTimeout(fn, 500); onCleanup(() => clearTimeout(t)) })⚙️ 参数
| effect | 副作用函数，接收 onCleanup 注册清理逻辑 |
|---|---|
| options | flush（pre|post|sync）/ onTrack / onTrigger |
返回值：停止侦听的函数 stop()
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
挂载时标题即变为「0 次点击」，每次点击后同步更新。💡 要点
💡 提示 不用手写依赖列表：写代码顺序无关，读到谁就追踪谁。
ℹ️ 说明 拿不到旧值：需要对比新旧值时改用手动声明源的 watch()。
⚠️ 注意 副作用里发请求要配 onCleanup 取消旧请求，否则快速变化会产生竞态。
🏷️ 相关核心
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q watchEffect 和 watch 怎么选？
A 依赖简单、不需要旧值 → watchEffect（代码更短）；需要旧值、需要精确控制依赖或惰性执行 → watch。
Q 为什么函数里没用到的数据变化也会执行？
A 只有被读取的响应式数据才被追踪——若在条件分支里读取，依赖会随执行路径变化。
Q watchEffect 能停止吗？
A 能，返回的 stop() 调用后即停止；组件卸载时也会自动停止。
