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 设置得再准，也因无依赖而不会再次执行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！