flush: 'post'使watch回调在DOM更新完成后执行，确保能访问最新渲染的DOM节点，适用于聚焦、获取尺寸等需真实DOM的操作，区别于默认pre（更新前）和sync（同步）模式。
在 Vue 3 中，watch 的 flush: 'post' 选项用于让回调函数在组件的 DOM 更新**完成之后**执行，适用于需要操作最新渲染结果的场景（比如获取元素尺寸、聚焦输入框、触发第三方库的 DOM 初始化等）。
为什么需要 flush: 'post'？
Vue 的响应式更新是异步批量进行的。默认情况下（flush: 'pre'），watch 回调会在 DOM 更新前执行，此时你读取的 DOM 还是旧状态；而 flush: 'post' 把回调推到下一个 microtask，在所有 DOM 补丁应用完毕后才运行，确保你能访问到更新后的 DOM 节点。
基本用法：watch + flush: 'post'
在 setup() 或组合式 API 中使用：
import { ref, watch, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const inputRef = ref(null)
// 监听 count，DOM 更新后自动聚焦输入框
watch(
() => count.value,
(newVal) => {
if (inputRef.value) {
inputRef.value.focus()
}
},
{ flush: 'post' } // ? 关键：延迟到 DOM 更新后执行
)
return {
count,
inputRef
}
}
}
常见适用场景和注意事项
-
操作真实 DOM 元素：如
element.getBoundingClientRect()、focus()、scrollIntoView()等，必须等 DOM 渲染完才有意义 -
配合
ref使用更可靠：直接通过模板 ref（如<input ref="inputRef">）获取元素，避免用document.querySelector可能查不到新节点 -
不能替代
nextTick的所有用途：如果只是想“等一次更新”，nextTick更轻量；watch+flush: 'post'是为“响应某个状态变化并做 DOM 后续处理”设计的 -
慎用于高频更新：若被监听的数据频繁变化，且回调中含重操作（如重绘、计算布局），可能影响性能；可考虑节流或改用
onUpdated钩子
对比其他 flush 模式
flush 支持三个值：
立即学习“前端免费学习笔记（深入）”；
-
'pre'（默认）：在 DOM 更新前执行，适合同步清理或提前计算 -
'post'：在 DOM 更新后执行，适合 DOM 读取/操作 -
'sync'：同步执行（不推荐，可能破坏响应式队列，引发意外副作用）
