watchPostEffect() 组件更新后再执行的副作用
最后更新：2026-10-22
watchPostEffect() 组件更新后再执行的副作用
watchPostEffect() 等价于 watchEffect 加 flush: 'post'：在组件 DOM 更新之后执行，适合读取更新后的 DOM 尺寸。
| 分组 | 响应式·核心 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
watchPostEffect(() => {
console.log(el.value.offsetHeight) // DOM 已更新
})⚙️ 参数
| effect | 副作用函数；选项与 watchEffect 相同（不含 flush） |
|---|
返回值：停止侦听的函数 stop()
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
显示当前段落高度；字号变化时高度随之更新。💡 要点
💡 提示 默认 watchEffect 在 DOM 更新前执行，读取 offsetHeight 等布局信息会拿到旧值——这就是本 API 的用途。
ℹ️ 说明 watchEffect 加 { flush: 'post' } 与本函数完全等价。
⚠️ 注意 依赖 DOM 引用时确保 ref 已挂载（首次可能为 null），代码里做判空。
🏷️ 相关核心
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和 watchEffect 的区别一句话？
A 执行时机：watchEffect 在 DOM 更新前，watchPostEffect 在 DOM 更新后。
Q 什么时候必须用它？
A 读取元素尺寸、滚动位置、焦点等依赖最新 DOM 的操作。
Q 可以用 nextTick 代替吗？
A 一次性读取可以用 await nextTick()；需要持续跟随变化则用 watchPostEffect。
