Vue 组合式 API 如何使用 watchEffect 自动追踪副作用依赖

watchEffect是Vue 3中自动追踪依赖并立即执行副作用的响应式API，通过运行时读取ref或reactive属性自动收集依赖，支持onInvalidate或返回清理函数处理异步副作用，并可通过flush配置控制执行时机。

watchEffect 是 Vue 3 组合式 API 中用于自动追踪响应式依赖并执行副作用的核心工具。它不需你手动列依赖，只要在回调里用到的 ref 或 reactive 属性，Vue 就会自动“记住”，等它们一变，就重新运行整个函数。

怎么写一个基础 watchEffect

直接传入一个函数即可，它会立刻执行一次，并开始监听其中访问的所有响应式数据：

1. 用 ref：访问 .value 就会被追踪
2. 用 reactive 对象：读取任意属性（如 state.count）即建立依赖
3. 不传任何源参数——和 watch 不同，这里完全靠“运行时读取”来收集依赖

如何清理异步或持久化副作用

当副作用涉及定时器、事件监听、请求未完成等情况，必须清理，否则可能引发内存泄漏或逻辑错乱。watchEffect 提供两种方式：

1. 传入带 onInvalidate 参数的回调：watchEffect((onInvalidate) => { ... })，然后在内部调用 onInvalidate(() => { /* 清理逻辑 */ })
2. 或让回调函数 直接返回一个清理函数，Vue 会在下次执行前或组件卸载时自动调用它

例如监听点击事件，每次新监听前自动移除旧监听：

watchEffect((onInvalidate) => {

const handler = () => console.log('click');

document.addEventListener('click', handler);

onInvalidate(() => document.removeEventListener('click', handler));

});

控制执行时机：flush 配置很关键

默认情况下，watchEffect 在组件更新前（flush: 'pre'）执行，适合做计算或提前准备；但如果你要操作刚更新完的 DOM，就得改成 flush: 'post'：

1. flush: 'pre'：更新前执行（默认，适合数据预处理）
2. flush: 'post'：DOM 渲染完成后执行（适合 ref.value.focus() 等操作）
3. flush: 'sync'：同步执行（极少用，可能破坏响应式队列机制）

什么时候该用 watchEffect 而不是 watch

优先选 watchEffect 的典型场景：

1. 依赖来源分散、嵌套深，比如同时用到 form.name、user.profile.avatar、route.query.id —— 手动写数组太累
2. 需要立即响应初始值（比如一进页面就发请求），且不关心“从什么变到什么”
3. 副作用逻辑强耦合于多个响应式状态，且变化后总是重跑整块逻辑

反过来，如果需要对比新旧值、精确控制监听路径、或只在变化后才执行（惰性），那就用 watch。