先记住这个答案
需要在所属组件 DOM 更新后运行侦听副作用，可以给 watch 或 watchEffect 配置 flush post；watchPostEffect 是 watchEffect 使用该调度方式的便捷接口。它们保留各自的依赖模型：watch 显式指定源，watchPostEffect 自动跟踪同步读取。状态持续变化都要同步第三方界面时适合 post 监听；一次事件修改后只做一次节点操作时，await nextTick 通常更直观。
- post 在所属组件节点更新后执行
- watchPostEffect 保留自动依赖模型
- 更新完成不等于动画、资源和绘制全部完成
post 解决自身节点还没刷新的问题
例如列表条数改变后要通知滚动容器，默认 pre 读取节点时可能还是旧列表。post 把这项工作放在所属组件更新后，使代码面对的是本轮已应用的新节点结构，而不是猜测要延迟几毫秒。
这并不保证图片已经下载、字体已经替换或过渡动画已经结束。尺寸依赖这些外部条件时，还需要使用资源加载事件、观察尺寸变化或动画完成信号，不能继续叠加 post 来等待未知任务。
显式观察并读取新文本
下例与普通组件渲染共享一个 count，只把回调时机改为 post。组件从零更新为一时，记录的状态和节点文本都为一，适合验证自身补丁已经完成这一具体保证。
如果改成 watchPostEffect，可以直接在效果里同步读取 count 建立依赖，再访问模板引用。但不要只读取非响应式的 DOM 文本就以为内容每次变化都会自动重跑，触发来源必须可以被 Vue 跟踪。
import { ref, watch, h } from 'vue'
const count = ref(0)
const seen: string[] = []
const PostProbe = {
setup() {
const label = ref<HTMLElement | null>(null)
watch(count, (value) => {
seen.push(value + ':' + (label.value?.textContent ?? 'missing'))
}, { flush: 'post' })
return () => h('span', { ref: label }, String(count.value))
}
}挂载后修改 count，等待刷新可以观察到新值和新文本匹配。它仍是 watch，默认不会因为配置了 post 就立即执行初始回调；如需初次效果，应另外明确首次运行需求。
与 nextTick 的选择由工作方式决定
点击展开后聚焦一次输入框，可以在点击处理函数中先改展开状态，再等待 nextTick，然后聚焦。若节点内容会被多个入口持续改变，集中建立一个 post 监听更容易保持同步，不必每个入口都复制等待逻辑。
持续副作用仍需要清理，例如每次新节点出现时创建第三方实例，应在下轮或卸载时销毁旧实例。post 只改变调用时点，并不管理外部实例的唯一性，也不会自动阻止重复注册事件。
容易答错的地方
- 把 post 当成页面完全稳定
- 本轮 Vue 节点更新完成，只是页面变化的一部分。异步组件、图片、网络数据和动画都可能继续改变布局，测量结果需要根据实际依赖选择后续信号，不能由 post 推导全部任务结束。
- 认为 watchPostEffect 只跟踪模板引用
- 它跟踪效果同步执行时实际读取的所有响应式依赖，不局限于引用变量。辅助函数里的额外读取也可能扩大触发范围，若第三方操作成本较高，应审查依赖或改用显式 watch。
面试官还会怎么问？
watchPostEffect 会像默认 watchEffect 一样同步首跑吗？
它使用更新后的调度方式，首次效果也会延后执行，不能依赖创建语句返回前就已经完成。需要立即得到某个纯计算结果时应直接计算或使用 computed，而不是从后置副作用中取值。
post 回调里面再 await nextTick 有必要吗？
仅为读取已经更新的自身节点通常没有必要。若回调又修改了会影响节点的状态，才产生新的等待需求；应说明等待哪次变化，避免在不了解顺序时不断追加等待。
组件条件渲染关闭后模板引用为空怎么办？
这是正常状态，回调应判断节点是否存在并释放旧实例，不能把空引用当成调度失败。若业务要求只在元素存在时工作，可将显隐状态作为触发条件的一部分，并覆盖移除路径。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。