watchEffect 的 flush 参数控制副作用执行时机：'pre'（默认）在组件更新前执行，可读旧 DOM；'post' 在 DOM 更新后执行，可安全操作新 DOM；'sync' 同步执行，破坏批处理，应慎用。

Vue 3 中 watchEffect 的 flush 参数用来控制副作用函数的执行时机，它不改变监听逻辑，只决定回调在响应式数据变化后「什么时候跑」。核心在于 Vue 的 DOM 更新是异步批量进行的，而 flush 就是调节副作用与这个更新流程的相对顺序。

flush: 'pre'（默认值）——组件更新前执行

数据变化后，watchEffect 回调会立即进入队列，并在组件重新渲染（即 DOM 更新）之前执行。

• 此时能读取到更新前的 DOM 状态（比如 element.innerText 还是旧值）
• 适合做依赖检查、状态预判、或避免重复触发渲染的轻量逻辑
• 注意：无法获取更新后的 DOM 或最新视图效果

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

数据变化 → Vue 批量更新 DOM → DOM 渲染完成 → watchEffect 回调才执行。

蓝湖代码转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.

下载

• 回调里能安全访问最新的 DOM 元素和内容（例如 document.getElementById('xxx')?.offsetHeight）
• 替代了 Vue 2 中手动写 this.$nextTick 的常见需求
• 这是操作 DOM 或依赖最终渲染结果时最常用的选择

flush: 'sync'——同步立即执行

响应式数据一变，回调立刻同步运行，不排队、不等待、不合并。

• 可能打断 Vue 的批处理优化，导致多次冗余执行或性能下降
• 仅适用于极少数场景，比如需要强制让某个缓存失效、或与非 Vue 系统做强同步
• 日常开发中应尽量避免使用

配置方式统一为对象第二参数：
watchEffect(() => { /* ... */ }, { flush: 'post' })

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