beforeUpdate 更新前（选项式）

最后更新：2026-10-22

beforeUpdate 在数据变化、DOM 即将更新之前调用：此时读到的还是旧 DOM。

📝 语法

export default {
  beforeUpdate() {
    // DOM 仍是旧值
  }
}

value	无参数

返回值：无返回值

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

输出：

每次点击先记录旧 DOM 状态，随后视图刷新。

ℹ️ 说明 使用频率低：多数场景用 watch（flush: 'pre'）即可。

⚠️ 注意 在这里改数据会造成额外更新，谨慎赋值。

更多案例即将上线。

Q 它和 DOM 更新谁先？

A 钩子先，DOM 更新紧随其后。

Q 能阻止更新吗？

A 不能，用 v-if 控制渲染条件。

Q 和 updated 的差别？

A 时机相反：这里 DOM 是旧的，updated 里是最新的。

Web-Tutorial 技术团队

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