watchEffect 的 flush 配置决定副作用执行时机：'pre'在 DOM 更新前执行，适合预处理；'post'在 DOM 更新后微任务中执行，适合操作新 DOM；'sync'同步执行，慎用以防破坏更新机制。

watchEffect 的 flush 配置决定了副作用函数执行的时机，直接影响响应式更新的“可见性”和“一致性”，尤其在操作 DOM、动画、第三方库集成等场景中非常关键。

flush: 'pre' —— 在组件更新前执行

副作用函数会在 Vue 更新 DOM 之前运行，此时获取到的是更新前的最新响应式值，适合做“预处理”或“提前判断”。比如你想在数据变化后、视图重绘前就取消某个定时器或清理资源：

• 适用于需要读取即将更新的值，但又不希望看到旧 DOM 状态干扰逻辑的场景
• 不会触发额外的 DOM 渲染，性能较优
• 注意：此时 ref.value 已更新，但对应 DOM 还未刷新，不能依赖 DOM 尺寸/位置等布局信息

flush: 'post' —— 在组件更新后异步执行

副作用函数被推迟到组件 DOM 更新完成之后，在下一个微任务（microtask）中执行。这是最常用也最安全的延迟执行方式：

• 确保能访问到更新后的 DOM，适合操作元素、触发动画、调用 getBoundingClientRect() 等
• 避免因同步执行导致 DOM 尚未就绪而报错或行为异常
• 与 nextTick() 行为类似，但更语义化、更贴近 watchEffect 的响应式流程

flush: 'sync' —— 同步立即执行（慎用）

副作用函数会在响应式依赖变化时**立刻同步执行**，不等待组件更新周期。这会打破 Vue 默认的批量更新机制：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 可能导致重复执行、渲染不一致、甚至无限循环（如在副作用中修改了被监听的响应式数据）
• 仅建议用于极少数必须同步响应的底层逻辑，例如调试、日志埋点（且不修改响应式状态）
• 一般情况下应优先考虑 'pre' 或 'post'

实际使用建议

大多数业务场景下，按需选择即可：

• 要操作更新后的 DOM → 用 flush: 'post'
• 要做更新前的状态清理或条件拦截 → 用 flush: 'pre'
• 除非明确需要同步行为，否则避免 flush: 'sync'
• 可配合 onInvalidate 处理清理逻辑，提升健壮性

不复杂但容易忽略。

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