vue生命周期中created()和mounted()的区别

最新推荐文章于 2025-07-25 09:06:05 发布

原创最新推荐文章于 2025-07-25 09:06:05 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue生命周期

Vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了Vue生命周期，即实例或组件从创建到消灭的过程。重点讲解了created和mounted的区别，created在模板渲染成html前调用，用于初始化属性值；mounted在渲染后调用，用于操作dom节点。还列举了不同生命周期钩子的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考自 https://blog.youkuaiyun.com/qq_29132907/article/details/80322485

1.什么是生命周期？

用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。
通过一系列实践，现在把所有遇到的问题整理一遍，今天记录一下created和mounted的区别：

2.created和mounted区别？

官方解释如下：
在这里插入图片描述
我们从图中看两个节点：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。下面看一个例子（用组件）。

3.应用场景

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，还做一些初始化，实现函数自执行
mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory：你确认删除XX吗？
destoryed ：当前组件已被删除，清空相关内容