onBeforeUpdate() 更新前钩子

最后更新：2026-10-22

onBeforeUpdate() 在响应式数据变化、DOM 即将更新之前调用：此时可读取更新前的 DOM 状态。

📝 语法

onBeforeUpdate(() => {
  // DOM 仍是旧状态
})

callback	更新前执行的函数

返回值：无

修改下面的代码，在预览区实时查看效果：

输出：

每次点击先记录“DOM 还是旧值”，随后视图才刷新。

ℹ️ 说明 使用频率低：多数“更新前读取”需求可用 watch + watchPostEffect 覆盖。

⚠️ 注意 在这里改数据会造成额外一轮更新，容易形成循环，谨慎赋值。

更多案例即将上线。

Q 它和 DOM 更新谁先？

A 钩子先：DOM 更新随后发生，所以这里读到的是旧 DOM。

Q 能在这里阻止更新吗？

A 不能，Vue 没有提供取消机制；需要条件渲染请用 v-if。

Q 和 watch 的 flush: 'pre' 有何不同？

A 时机相同（DOM 前），但 watch 监听具体数据且有新旧值，该钩子不带参数。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。