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

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

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

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

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

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

相关推荐
楊无好4 分钟前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O9 分钟前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木22 分钟前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特42 分钟前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生1 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569151 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG1 小时前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost1 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost1 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost1 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端