Vue3中flush选项控制watchEffect执行时机，提供pre（默认，更新前）、post（更新后）和sync（同步）三种模式，分别适用于读取旧DOM、操作新DOM及紧急响应场景。
Vue 3 中 watchEffect 默认在组件更新前执行回调，但你可以通过 flush 配置项精确控制它何时运行——这是最直接、最常用的方式。
用 flush 控制执行时机
flush 是 watchEffect 的核心配置选项，决定副作用函数在响应式数据变化后、DOM 更新过程中的触发节点。它有三个可选值：
- pre（默认）：在组件更新（即 DOM 重新渲染）之前执行。适合读取当前 DOM 状态、避免重复操作，比如获取输入框焦点前的值。
- post：在组件更新完成、DOM 已同步刷新后执行。适合需要操作最新 DOM 的场景，例如滚动到新元素、测量容器尺寸、调用第三方 UI 库的 update 方法。
- sync：数据一变就立即同步执行，不等待队列调度。性能开销大，仅在极少数必须“立刻响应”的逻辑中使用（如某些底层状态同步），一般不推荐。
结合 onInvalidate 做异步清理
执行时机不仅关乎“什么时候开始”，也关乎“旧任务是否及时终止”。当回调含异步操作（如定时器、API 请求）时，上一次未完成的任务可能干扰下一次执行结果。这时要利用 onInvalidate 参数：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 它会在下一次回调执行前自动调用你注册的清理函数；
- 典型用法是清除 pending 的 setTimeout、AbortController.abort() 或取消未完成的 Promise；
- 这本质上是把“执行时机管理”从时间维度延伸到了任务生命周期维度。
手动停止监听来终止后续执行
watchEffect 返回一个停止函数，调用它即可彻底结束监听，不再响应任何后续变化：
立即学习“前端免费学习笔记（深入）”；
- 适用于条件性监听，比如只在弹窗打开时监控筛选参数；
- 也可配合
onBeforeUnmount主动卸载，防止组件销毁后仍触发回调； - 停止后，即使依赖变化也不会再执行，也就谈不上“执行时机”问题了。
注意依赖收集的同步性对时机的影响
watchEffect 的依赖收集发生在回调首次同步执行过程中。如果回调里有 await 或 setTimeout，其内部访问的响应式数据不会被追踪：
- 这意味着那些异步代码里的状态变化，不会触发下一次回调——不是时机没控制好，而是压根没被监听；
- 若需监听异步路径中的数据，应确保关键响应式读取出现在同步部分，或拆分为多个 watchEffect；
- 否则即使 flush 设置得再准，也因无依赖而不会再次执行。
