watcheffect是vue 3中自动追踪依赖并立即执行副作用的响应式api，通过运行时读取ref或reactive属性自动收集依赖，支持oninvalidate或返回清理函数处理异步副作用，并可通过flush配置控制执行时机。
watchEffect 是 Vue 3 组合式 API 中用于自动追踪响应式依赖并执行副作用的核心工具。它不需你手动列依赖，只要在回调里用到的 ref 或 reactive 属性，Vue 就会自动“记住”，等它们一变，就重新运行整个函数。
怎么写一个基础 watchEffect
直接传入一个函数即可，它会立刻执行一次，并开始监听其中访问的所有响应式数据：
- 用 ref：访问
.value就会被追踪 - 用 reactive 对象：读取任意属性（如
state.count）即建立依赖 - 不传任何源参数——和
watch不同，这里完全靠“运行时读取”来收集依赖
如何清理异步或持久化副作用
当副作用涉及定时器、事件监听、请求未完成等情况，必须清理，否则可能引发内存泄漏或逻辑错乱。watchEffect 提供两种方式：
- 传入带 onInvalidate 参数的回调：
watchEffect((onInvalidate) => { ... })，然后在内部调用onInvalidate(() => { /* 清理逻辑 */ }) - 或让回调函数 直接返回一个清理函数，Vue 会在下次执行前或组件卸载时自动调用它
例如监听点击事件，每次新监听前自动移除旧监听：
const handler = () => console.log('click');
document.addEventListener('click', handler);
onInvalidate(() => document.removeEventListener('click', handler));
});
控制执行时机：flush 配置很关键
默认情况下，watchEffect 在组件更新前（flush: 'pre'）执行，适合做计算或提前准备；但如果你要操作刚更新完的 DOM，就得改成 flush: 'post'：
-
flush: 'pre'：更新前执行（默认，适合数据预处理） -
flush: 'post'：DOM 渲染完成后执行（适合ref.value.focus()等操作） -
flush: 'sync'：同步执行（极少用，可能破坏响应式队列机制）
什么时候该用 watchEffect 而不是 watch
优先选 watchEffect 的典型场景：
- 依赖来源分散、嵌套深，比如同时用到
form.name、user.profile.avatar、route.query.id—— 手动写数组太累 - 需要立即响应初始值（比如一进页面就发请求），且不关心“从什么变到什么”
- 副作用逻辑强耦合于多个响应式状态，且变化后总是重跑整块逻辑
反过来，如果需要对比新旧值、精确控制监听路径、或只在变化后才执行（惰性），那就用 watch。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
