Vue生命周期小剧场：mounted和created到底谁先出场？

大家好，我是小杨，一个写了6年前端的老油条。今天咱们来聊聊Vue中经常被问到的生命周期钩子------created和mounted。这两个钩子看似简单，但新手很容易搞混。别担心，我会用最接地气的方式给大家讲明白！

先来个生活小例子

想象你在装修房子：

created阶段：就像房子刚建好框架，水电图纸都画好了，但还没开始装修
mounted阶段：就像家具都搬进去了，随时可以入住

正经技术解释

1. created：婴儿刚出生

javascript 复制代码

export default {
  created() {
    // 这里可以访问data里的数据
    console.log('组件诞生了！但还没见到DOM');
    this.fetchData(); // 通常我在这里发起异步请求
    
    // 举个栗子
    this.userList = ['张三', '李四'];
    console.log(this.userList); // 正常输出
  }
}

特点：

组件"出生证"刚办好
可以访问data、methods
但DOM还没生成，所以别在这里操作DOM！
适合做：初始化数据、发起API请求

2. mounted：装修完工

javascript 复制代码

export default {
  mounted() {
    // 这里可以操作DOM了
    console.log('组件已经挂载到页面上了');
    this.$refs.myButton.addEventListener('click', this.handleClick);
    
    // 举个栗子
    const myElement = document.getElementById('myDiv');
    console.log(myElement); // 现在能拿到了
  }
}

特点：

组件已经"安家落户"
可以操作DOM了
适合做：操作DOM、初始化第三方库（比如图表库）
注意：这里发请求可能会比created慢一丢丢

超直观对比表

特性	created	mounted
DOM准备好了吗	❌ 还没出生	✅ 已经安家
能操作DOM吗	❌ 会报错	✅ 随便玩
常用用途	初始化数据	操作DOM
异步请求	推荐在这里	也可以但不推荐

真实项目踩坑记

记得我刚学Vue时做过一个傻事：

javascript 复制代码

created() {
  // 我想在这里获取DOM元素...
  const el = document.querySelector('.my-class'); // 结果是null！
  console.log(el); // 输出null，当场懵逼
}

后来才明白，created阶段DOM根本不存在！这种操作必须放到mounted里。

什么时候用哪个？

用created：

需要尽早获取数据
需要初始化组件状态
不需要操作DOM的计算

用mounted：

需要操作DOM元素
需要集成第三方库（比如初始化ECharts）
需要获取元素尺寸/位置

性能小贴士

如果组件不需要操作DOM，优先用created发起请求，这样能更早获取数据。我曾经优化过一个列表页，把请求从mounted移到created，加载速度快了200-300ms！

总结

记住这个顺口溜：

"created生，mounted挂，

操作DOM要等挂，

数据初始化早出发，

性能优化顶呱呱！"

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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