onMounted() 挂载完成钩子

最后更新：2026-10-22

onMounted() 在组件及其子组件挂载到 DOM 后调用：拿模板引用、初始化第三方库、发起请求的标准位置。

📝 语法

onMounted(() => {
  console.log(el.value.offsetWidth)  // DOM 已可用
})

callback	挂载完成后执行的函数

返回值：无

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

输出：

显示该段落的真实像素宽度。

💡 提示 第三方库初始化（图表、编辑器）、DOM 测量、首屏数据请求都放这里。

⚠️ 注意 SSR 环境下服务端不执行 onMounted（只在浏览器执行），依赖 DOM 的逻辑要放在这里以防报错。

ℹ️ 说明 父组件的 onMounted 晚于全部子组件挂载完成。

更多案例即将上线。

Q 为什么这里能拿到 DOM，setup 里不行？

A setup 执行时组件尚未渲染；onMounted 在渲染写盘完成后才触发。

Q 和 onUpdated 的区别？

A onMounted 只执行一次；onUpdated 每次组件更新都会执行。

Q 能 async 吗？

A 可以写成 async 函数，但注册本身必须同步调用。

Web-Tutorial 技术团队

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