Vue生命周期小课堂：created和mounted到底有啥区别？

大家好，我是小杨，一个摸爬滚打6年的前端老油条。今天咱们来聊聊Vue里两个特别容易搞混的生命周期钩子------created和mounted。别看它们名字长得像，实际用起来差别可大了！

1. 先说说Vue生命周期的基本流程

Vue组件的生命周期就像一个人的成长过程：出生（创建）→ 上学（挂载）→ 工作（更新）→ 退休（销毁）。而created和mounted就是"出生"和"上学"这两个关键阶段。

2. created：组件出生了，但还没上学

created阶段，Vue实例已经完成了数据观测（data、props等初始化） ，但这时候DOM还没生成，也就是说，你没法在这里操作DOM元素。

适用场景：

初始化数据（比如从后端API拉取数据）
做一些不需要DOM的操作（比如计算属性、事件监听）

举个栗子：

javascript 复制代码

export default {
  data() {
    return {
      userList: []
    }
  },
  created() {
    // 这里可以请求数据，但还不能操作DOM
    fetch('https://api.example.com/users')
      .then(res => res.json())
      .then(data => {
        this.userList = data
      })
    
    console.log('组件出生了，但DOM还没渲染！')
  }
}

3. mounted：组件挂载完成，可以操作DOM了

mounted阶段，Vue已经把组件挂载到真实的DOM上 了，这时候你就能愉快地操作DOM了，比如用ref获取元素、初始化第三方库（如ECharts、Swiper等）。

适用场景：

操作DOM（比如获取元素、绑定事件）
使用需要DOM的JS库（比如地图、图表）

再举个栗子：

javascript 复制代码

export default {
  mounted() {
    // 现在可以操作DOM了！
    const myElement = this.$refs.myButton
    console.log('按钮元素：', myElement)
    
    // 比如初始化一个图表
    const chart = new Chart(this.$refs.chartCanvas, { /* 配置 */ })
  }
}

4. 对比总结

钩子函数	触发时机	能否操作DOM	典型用途
`created`	数据初始化完成，但DOM未渲染	❌ 不能	数据初始化、API请求
`mounted`	DOM已挂载完成	✅ 能	DOM操作、第三方库初始化

5. 常见坑点

在created里操作DOM？ → 会报错，因为这时候DOM还不存在！
在mounted里修改数据？ → 可以，但会触发更新生命周期（updated），小心性能问题！

6. 小杨的实战建议

如果只是拿数据 ，放created里更早触发，减少白屏时间。
如果需要操作DOM 或者等页面渲染完再执行 （比如动画），必须用mounted。

⭐ 写在最后

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

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

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

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

✅ 解答我文章中一些疑问

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

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

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

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