Vue 3 watch 的 flush 选项控制回调执行时机：'pre'（默认）在更新前执行，可读新值但 DOM 未更新；'post' 在 DOM 渲染后执行，适合操作真实 DOM；'sync' 同步执行，慎用。

Vue 3 的 watch 中 flush 选项用来精确控制回调函数的执行时机，核心是解决「数据变了，DOM 到没到最新状态」这个常见问题。它不改变监听逻辑，只决定回调在组件更新周期中的哪个阶段运行。

flush: 'pre'（默认值，更新前执行）

不写 flush 时，Vue 自动使用 'pre'。回调在组件重新渲染、DOM 更新之前触发。

• 能读取到响应式数据的最新值（newVal），但 DOM 还是旧的
• 适合做清理工作：比如取消未完成的请求、清除定时器、中断动画
• 避免在回调里修改被监听的数据，否则可能引发重复触发或状态错乱

flush: 'post'（更新后执行，最常用）

回调在 Vue 完成 DOM 渲染后、下一个微任务中执行，确保你能访问到最新渲染的 DOM 节点和布局信息。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 适合调用 focus()、scrollIntoView()、getBoundingClientRect() 等依赖真实 DOM 的操作
• 行为上接近 nextTick()，但语义更清晰，且与 watch 生命周期天然对齐
• 示例：搜索关键词变化后，自动聚焦输入框

flush: 'sync'（同步执行，慎用）

数据一变，回调立刻同步执行，跳过 Vue 的异步队列调度。

立即学习“前端免费学习笔记（深入）”；

• 会破坏批量更新优化，可能导致重复执行、渲染撕裂甚至无限循环
• 仅建议用于调试日志、性能埋点等不修改响应式状态的纯副作用
• 业务代码中基本不需要；如果真遇到必须同步的场景，应先检查逻辑设计是否合理