一、什么是watchEffect？
watchEffect 是 Vue3 组合式 API 提供的一个响应式侦听器，专门用来监听响应式数据的变化，并执行相应的副作用逻辑。它的核心定义很干脆：立即执行一次副作用函数，自动追踪函数内部访问到的所有响应式数据，当这些依赖发生变化时，重新执行该函数——整个过程不需要手动指定监听源。
简单来说，它就是 watch 的“简化版”，专注于“副作用响应”这件事，把 watch 需要手动指定依赖的繁琐操作省掉了。用起来更直接，也更省心。
二、工作原理
它的底层基于 Vue3 响应式系统的 ReactiveEffect 实现，流程非常清晰：
- 执行 watchEffect 传入的副作用函数时，会触发响应式数据的 getter。
- Vue 自动收集函数内访问到的所有响应式依赖（这就是依赖追踪）。
- 当依赖发生变化时，触发 setter，然后重新执行副作用函数。
- 组件卸载时，侦听器会自动停止，避免内存泄漏。
三、核心特性
- 自动收集依赖：不需要像 watch 那样手动指定监听源，函数里用到的响应式数据都会被自动追踪。
- 立即执行：默认在首次渲染时就执行一次，不需要额外配置
immediate。 - 自动清理：支持通过
onInvalidate清理副作用，比如移除事件监听、取消请求等。 - 自动停止：在
（注意：原文此处“自动停止：在”后内容不完整，但为依据原文保留原样。）
四、实战用法示例
4.1 基础用法（修改页面标题）
4.2 自动清理副作用
4.3 手动停止侦听
五、与watch的核心区别
| 对比维度 | watchEffect | watch |
|---|---|---|
| 依赖收集 | 自动收集函数内依赖 | 需手动指定监听源 |
| 触发时机 | 默认立即执行 | 默认惰性执行（需immediate开启） |
| 旧值获取 | 不支持 | 支持（newVal, oldVal） |
| 适用场景 | 动态依赖、简单副作用 | 旧值对比、节流防抖、异步请求 |
六、常见避坑点
- 副作用堆积：如果没有清理副作用（比如事件监听、定时器），多次执行后会导致重复绑定。解决办法是用
onInvalidate进行清理。 - 依赖未追踪：如果函数内部没有直接访问响应式数据（比如嵌套过深，没有触发 getter），那么依赖就不会被追踪到。需要确保依赖被直接访问。
- 异步逻辑问题：异步操作内部访问的响应式数据不会被追踪，必须把依赖写在同步代码中。
七、核心总结
watchEffect 的核心价值就是“简化响应式侦听”——不需要手动指定依赖，特别适合动态依赖和简单副作用的场景，比如 DOM 操作、页面标题修改、临时调试等。记住三个关键点：
- 自动收集依赖，无需手动配置监听源。
- 首次立即执行，依赖变化后重新执行。
- 务必用
onInvalidate清理副作用，避免内存泄漏。
它和 watch 是互补关系：简单副作用用 watchEffect，需要旧值对比、异步节流时用 watch。两相结合，才能高效驾驭 Vue3 的响应式侦听机制。
