mounted 挂载完成（选项式）

最后更新：2026-10-22

mounted 在组件渲染并插入 DOM 之后调用：操作模板引用、初始化第三方库、测量尺寸的标准位置。

📝 语法

export default {
  mounted() {
    this.$refs.el.focus()   // DOM 已就绪
  }
}

value	无参数

返回值：无返回值

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

输出：

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

💡 提示 第三方库初始化（图表/编辑器）、自动聚焦、数据请求都能放这里。

ℹ️ 说明 子组件的 mounted 先于父组件执行（自下而上）。

⚠️ 注意 SSR 下不执行；依赖 DOM 的逻辑放这里可自然避免服务端报错。

更多案例即将上线。

Q 和 created 的典型分工？

A created 取数据/准备；mounted 操作 DOM 与第三方库。

Q 多次执行吗？

A 不会，只在首次挂载后执行一次。

Q 为什么遍历子组件 ref 要等它？

A 子组件此时已完成挂载，$refs 才能拿到它们的实例。

Web-Tutorial 技术团队

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