watchEffect是Vue 3 Composition API中自动追踪响应式依赖并立即执行副作用的轻量监听工具，通过getter触发track建立依赖、set触发trigger重跑回调，支持onInvalidate清理、flush控制时机及stop手动停止。
watchEffect 是 Composition API 中最轻量、最自动化的响应式监听方式。它不靠你告诉它“盯谁”，而是自己在执行时“看到什么就记下什么”，数据一变，立刻重跑。
自动收集依赖是怎么发生的
当你写 watchEffect(() => { console.log(count.value) })，Vue 会立刻执行这个函数。执行过程中，count.value 触发 ref 的 getter，内部调用 track()，把当前 effect 和 count 关联起来。之后只要 count.value 被修改（触发 set → trigger），这个函数就自动再执行一次。
这意味着：
- 没读到的响应式数据，就不会被追踪——比如 if 分支里没进，里面用的 user.name 就不会响应变化
- 嵌套对象、计算属性、甚至 toRef 解构后的值，只要在函数里被读取，都会被纳入依赖
- 对 reactive 对象是浅层追踪：只追踪 obj.xxx 这一层，不深入 obj.xxx.yyy（除非你真的访问了它）
副作用函数怎么执行和清理
watchEffect 默认立即执行一次，适合初始化逻辑或 DOM 同步操作。它还支持副作用清理：
- 如果回调函数返回一个函数，那个函数会在下次执行前或组件卸载时被调用（用于取消请求、清除定时器等）
- 配合 onInvalidate 可更清晰地处理异步竞态，比如输入搜索时自动取消上一次 pending 请求
示例：
watchEffect((onInvalidate) => {const timer = setTimeout(() => console.log('done'), 1000);
onInvalidate(() => clearTimeout(timer));
});
控制执行时机与手动停止
通过 options 可调整行为：
- flush: 'pre'（默认）：在组件更新前执行，适合读 DOM 或同步修改
- flush: 'post'：在组件更新后执行，适合操作已渲染的 DOM 元素
- flush: 'sync'：同步执行，慎用，可能影响性能
- 调用 watchEffect 返回的 stop() 函数，可随时中止监听和依赖追踪
什么时候该用 watchEffect，而不是 watch
选 watchEffect 当你：
- 逻辑只依赖几个响应式变量，且它们总是一起变化
- 需要初始化就运行（比如首次加载数据、设置初始样式）
- 依赖关系动态或嵌套较深，手动列 source 容易漏
- 要快速实现防抖、自动保存、DOM 响应等场景
反之，如果只关心某个特定值的变化、需要新旧值对比、或依赖大量数据但仅部分敏感，watch 更精准可控。
