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

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

相关推荐
brzhang18 分钟前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang23 分钟前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构
reembarkation33 分钟前
自定义分页控件,只显示当前页码的前后N页
开发语言·前端·javascript
Roye_ack1 小时前
【项目实战 Day9】springboot + vue 苍穹外卖系统(用户端订单模块 + 商家端订单管理模块 完结)
java·vue.js·spring boot·后端·mybatis
gerrgwg1 小时前
React Hooks入门
前端·javascript·react.js
ObjectX前端实验室1 小时前
【react18原理探究实践】调度机制之注册任务
前端·react.js
汉字萌萌哒1 小时前
【 HTML基础知识】
前端·javascript·windows
ObjectX前端实验室2 小时前
【React 原理探究实践】root.render 干了啥?——深入 render 函数
前端·react.js
北城以北88883 小时前
Vue--Vue基础(二)
前端·javascript·vue.js
ObjectX前端实验室4 小时前
【react18原理探究实践】更新调度的完整流程
前端·react.js