onUpdated() 更新完成钩子

最后更新：2026-10-22

onUpdated() 在组件因响应式变化重新渲染并更新 DOM 之后调用：适合读取更新后的 DOM 尺寸或同步第三方库。

📝 语法

onUpdated(() => {
  // DOM 已是最新状态
})

callback	更新完成后执行的函数

返回值：无

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

输出：

字体变大后高度数字同步跟着变化。

⚠️ 注意 绝不要在钩子里改状态：会再次触发更新，形成无限循环。

💡 提示 需要精确跟踪某个数据变化时优先用 watch/watchPostEffect，本钩子只适合“任何更新后都要做”的场景（如重算布局）。

ℹ️ 说明 父组件的 onUpdated 在其子组件更新之后触发。

更多案例即将上线。

Q 为什么在这里改数据会死循环？

A 改动触发新一轮更新，钩子再次执行并再次改动，如此往复。

Q 和 nextTick 的关系？

A onUpdated 在执行时机上属于“DOM 更新完成后”，与 await nextTick() 之后的时机一致。

Q 什么时候必须用它？

A 任何数据变化后都要同步 DOM 测量/第三方库，且无法枚举具体依赖时。

Web-Tutorial 技术团队

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