Vue生命周期：beforeMount和mounted到底差在哪？手把手教你避坑！

大家好，我是小杨，一个写了6年前端的老码农。今天咱们聊聊Vue生命周期里两个容易混淆的钩子------beforeMount和mounted。别看它们名字像双胞胎，用错了分分钟让你怀疑人生！

一、先看官方定义（说人话版）

beforeMount ：组件模板已经编译好，但还没挂载到DOM上（虚拟DOM存在，但页面上还看不到）
mounted ：组件已经挂载到真实DOM，可以愉快地操作DOM了

举个栗子🌰：

这就像装修房子，beforeMount是设计图已经画好（虚拟DOM），但还没开始施工；mounted是房子已经盖好，可以进去摆家具了（操作真实DOM）。

二、代码实测对比

javascript 复制代码

export default {
  beforeMount() {
    console.log('beforeMount:', document.getElementById('myTitle')) // null
    console.log('虚拟DOM已就绪:', this.$el) // undefined
  },
  mounted() {
    console.log('mounted:', document.getElementById('myTitle')) // <h1 id="myTitle">我是标题</h1>
    console.log('真实DOM已挂载:', this.$el) // DOM节点
  },
  template: '<h1 id="myTitle">我是标题</h1>'
}

输出结果说明一切：

beforeMount里根本拿不到DOM元素（因为还没挂载）
mounted里才能稳稳地操作DOM

三、经典踩坑场景

场景1：初始化图表库（ECharts）

javascript 复制代码

// ❌ 错误写法（在beforeMount里初始化）
beforeMount() {
  const chart = echarts.init(document.getElementById('chart')) // 报错！DOM不存在
}

// ✅ 正确写法
mounted() {
  const chart = echarts.init(document.getElementById('chart')) // 正常运行
  chart.setOption({ /*...*/ })
}

血泪教训 ：我曾经在beforeMount里调第三方图表库，debug了半天才发现是钩子用错了...

场景2：异步数据与DOM操作

javascript 复制代码

async mounted() {
  const userData = await api.getUserInfo() // 先请求数据
  this.user = userData
  this.$nextTick(() => {
    // 等DOM更新后再操作
    document.querySelector('.avatar').classList.add('loaded')
  })
}

关键点：

数据获取和DOM操作都要在mounted之后
如果需要等数据渲染后的DOM，记得用$nextTick

四、原理图解

text 复制代码

beforeCreate → created → beforeMount → （生成虚拟DOM） → mounted
                              ↓
                         （挂载到真实DOM）

五、什么时候用beforeMount？

虽然90%的场景都用mounted，但beforeMount也有特殊用途：

SSR（服务端渲染） ：客户端激活前修改DOM结构
性能监控：记录挂载前的时间点
特殊框架集成：某些UI库需要在挂载前注入配置

六、终极记忆口诀

"Before挂载空对空，Mounted之后DOM疯"

（翻译：beforeMount操作DOM会扑空，mounted之后才能疯玩DOM）

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群：906392632

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！