updated 更新完成（选项式）

最后更新：2026-10-22

updated 在数据变化导致重新渲染、DOM 更新完成之后调用：适合重新测量或同步第三方组件。

📝 语法

export default {
  updated() {
    // DOM 已更新
  }
}

value	无参数

返回值：无返回值

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

输出：

字号变大后高度数字同步更新。

⚠️ 注意 绝不在 updated 里修改被渲染的数据：会再次触发更新，形成死循环。

💡 提示 需要跟踪特定数据时优先用 watch；updated 适合“任何更新后都要做”的同步。

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

更多案例即将上线。

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

A 钩子里的赋值又触发新一轮更新，钩子再次执行，永不停止。

Q 和 watch 的场景区别？

A watch 关注具体数据变化；updated 只关心“渲染完成了”这件事。

Q 能拿到最新 DOM 吗？

A 能，这是它相对 beforeUpdate 的核心优势。

Web-Tutorial 技术团队

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