watchEffect自动追踪函数内读取的响应式数据并立即执行，依赖变化时重新运行，适用于UI更新、日志、请求等轻量场景；支持onInvalidate清理异步副作用，不提供新旧值对比，区别于需显式声明依赖的watch。

watchEffect 会自动追踪它内部读取的响应式数据，无需手动列依赖，初始化时立即执行，后续只要所用到的响应式值变化，就重新运行。它适合“值一变就做事”的轻量场景，比如更新 UI、发请求、打日志。

自动收集依赖，用到才监听

它只监听函数体中实际访问过的响应式变量。比如：

• 写了 count.value 和 name.value，就只追踪这两个 ref
• 用了 if (show) { state.msg }，只有 show 为 true 时，state.msg 才被纳入依赖
• 没读取的响应式属性，哪怕在同一对象里，也不会触发重运行

处理异步请求要防竞态

watchEffect 不等待 Promise 结束，多次触发可能并发执行，旧响应覆盖新结果。稳妥做法是：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 用 ref 记录当前请求的唯一标识（如递增 id），响应返回时比对是否匹配
• 搭配 AbortController，每次新请求前 abort 上一个
• 避免在函数开头就 await 长时间 pending 的 Promise，防止逻辑阻塞感

控制执行时机与手动清理

watchEffect 返回一个停止函数，常在组件卸载时调用；还支持配置执行时机：

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

• flush: 'pre' —— 在组件更新前执行（默认）
• flush: 'post' —— 在 DOM 更新后执行，适合操作真实 DOM
• flush: 'sync' —— 同步执行，极少需要，性能开销大
• 传入 onInvalidate 回调，可清除上一次未完成的副作用（如取消定时器、中断请求）

别和 watch 混用错场景

watchEffect 简洁但隐式，watch 明确但略冗。选型看需求：

• 只需“值变了就刷新某状态”，用 watchEffect
• 要对比新旧值、监听深层嵌套、或依赖计算属性 getter，选 watch
• 需 immediate + deep 组合，watch 更直接；watchEffect 不支持 deep