Vue3 watch的flush参数决定回调执行时机：'post'在DOM更新后执行，适合操作真实DOM；'pre'在更新前执行，适合清理资源；'sync'同步执行，仅限调试等极少数场景。
Vue3 的 watch 中 flush 参数，核心是解决「我该在 DOM 更新前、后，还是同步执行回调」这个问题。它不改变监听逻辑，只调整回调函数的执行时机——尤其当你需要读取或操作真实 DOM 时，选错会拿不到预期内容。
flush: 'post' —— 操作更新后 DOM 的标准选择
这是最常用也最安全的配置。回调会在 Vue 完成 DOM 渲染后，在下一个微任务中执行，确保你能访问到最新渲染的元素状态。
- 适合调用
element.getBoundingClientRect()、focus()、scrollIntoView()等依赖真实布局的操作 - 行为上接近
nextTick()，但语义更清晰，且与 watch 生命周期天然对齐 - 示例：监听一个开关状态，DOM 更新后自动聚焦输入框
const inputRef = ref(null)
watch(searchText, () => {
if (inputRef.value) inputRef.value.focus() // 此时 input 已渲染并可聚焦
}, { flush: 'post' })
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
flush: 'pre' —— 更新前预处理的隐式默认值
不写 flush 时，Vue3 实际使用的就是 'pre'。回调在组件更新（即 DOM 重绘）之前运行，此时响应式数据已更新，但视图尚未刷新。
- 适合清理资源：比如取消上一轮未完成的请求、清除定时器、中断动画
- 能拿到最新的
ref.value，但document.getElementById或ref元素仍指向旧 DOM - 避免在回调中修改被监听的数据，否则可能引发重复触发或状态不一致
flush: 'sync' —— 同步执行，仅限极少数场景
回调会随数据变化**立刻同步触发**，跳过 Vue 的批量更新调度机制。这会破坏默认的响应式流程，容易导致问题。
- 可能造成重复执行、渲染撕裂、甚至无限循环（如在回调里又改了监听源）
- 仅建议用于调试日志、性能埋点等不修改响应式状态的纯副作用
- 业务代码中基本不需要，遇到必须同步的场景，应优先检查设计是否合理
怎么选？看你要操作的对象
一句话判断：要读/写 DOM → 选 post；要清理/拦截变更 → 选 pre；除非明确知道后果，否则别碰 sync。
- 想获取更新后的元素尺寸、位置、内容？→
{ flush: 'post' } - 想在新值生效前取消旧请求？→
{ flush: 'pre' }（或直接不写） - 想让 watch 回调和
count.value++严格按顺序执行？→ 通常不该这么想，Vue 的异步更新本身就是优化
