watchEffect 是 Vue 3 中自动追踪响应式依赖并立即执行的副作用函数，支持依赖收集、首次同步运行及 onInvalidate 清理机制，适用于表单联动、动态样式等无需新旧值对比的场景。
watchEffect 是 Vue 3 响应式系统中一个轻量但强大的工具，它会自动追踪内部响应式数据的依赖，并在依赖变化时重新执行。与传统的 watch 不同，它无需显式指定监听目标，写法更简洁，也更适合“副作用即响应”的场景。
自动追踪依赖：不用手动列响应式变量
watchEffect 会在首次执行时，自动收集内部访问过的响应式属性（如 ref、reactive 中的字段），并建立依赖关系。只要这些属性后续发生变化，函数就会再次运行。
- 只追踪“被读取”的响应式值，赋值操作（
=）不会触发追踪 - 不追踪普通变量、常量、非响应式对象属性
- 若内部调用了一个返回 ref 的函数，该 ref 的值也会被追踪（前提是被读取）
立即执行：声明即运行，省去 immediate: true
watchEffect 默认在定义时同步执行一次，相当于 watch(..., { immediate: true })，适合用于初始化副作用，比如请求接口、设置定时器、更新 DOM 状态等。
- 第一次执行发生在组件 setup() 执行完成、DOM 挂载前（但响应式数据已就绪）
- 若需跳过首次执行，可用
watchEffect.onInvalidate配合清理逻辑实现条件控制（较少见）
清理异步副作用：避免内存泄漏的关键
当 watchEffect 触发频繁（如输入搜索、滚动监听），上一次异步操作可能还未完成，新一次又已发起。watchEffect 提供了 onInvalidate 回调，在下一次执行前自动调用，可用于取消请求、清除定时器等。
- 在函数体内调用
onInvalidate(() => { /* 清理逻辑 */ }) - 例如：使用
AbortController取消 fetch 请求 - 注意：清理函数只在 watchEffect 重新执行前触发，不是组件卸载时才调用
适用场景建议：什么情况下优先用 watchEffect？
当你需要“只要某些响应式值一变，就立刻做点事”，且逻辑聚焦于这些值本身，而非对比新旧值时，watchEffect 更自然。
- 表单联动：输入关键词后自动触发搜索（含防抖可配合 setTimeout + onInvalidate）
- 动态样式计算：根据屏幕宽度或主题色 ref 更新 CSS 变量
- 日志埋点：监控用户切换路由参数或筛选条件时上报行为
- 不推荐用于需要明确区分 oldValue / newValue 的场景（此时用 watch 更清晰）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
