关于Vue实例的生命周期created和mounted的区别

旧城等待， 2022-03-30 17:07 257阅读 0赞

### 什么是生命周期 ###

> Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

### 再上图，对生命周期图的标注 ###

![1460000012510450][]![1460000012510450][]![6aedb651gy1fmncxvp4doj20xc2cfaim.jpg][]

> 特别值得注意的是created钩子函数和mounted钩子函数的区别

### 每个钩子函数都在啥时间触发 ###

beforeCreate

> 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created

> 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount

> 在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted

> el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate

> 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

> 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy

> 实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed

> Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

> 转： [https://segmentfault.com/a/1190000008570622][https_segmentfault.com_a_1190000008570622]

[1460000012510450]: https://segmentfault.com/img/remote/1460000012510450
[6aedb651gy1fmncxvp4doj20xc2cfaim.jpg]: https://ws1.sinaimg.cn/large/6aedb651gy1fmncxvp4doj20xc2cfaim.jpg
[https_segmentfault.com_a_1190000008570622]: https://segmentfault.com/a/1190000008570622

发表评论取消回复

表情：

评论列表（有 0 条评论，257人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue之生命周期（beforeCreate，created，beforeMount，mounted，beforeUpdate，updated）

什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！ [生命周期钩子][Link 1]：就是生命周期事件的别名而

刺骨的言语ヽ痛彻心扉/ 2023年07月11日 06:08/ 0 赞/ 82 阅读

相关 vue中created和mounted的区别

[https://www.jianshu.com/p/2360bc909614][https_www.jianshu.com_p_2360bc909614] 先看一下v

水深无声/ 2023年06月23日 12:52/ 0 赞/ 227 阅读

相关 vue中生命周期create与mounted

vue中生命周期create与mounted 座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人 -------------------- 转载于

不念不忘少年蓝@/ 2022年12月24日 00:43/ 0 赞/ 270 阅读

相关 Vue生命周期中mounted和created的区别

虽然也在用，也看了很多次。还是比较模糊 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，

朴灿烈づ我的快乐病毒、/ 2022年11月21日 01:25/ 0 赞/ 239 阅读

相关 VUE生命周期中created和mounted

一、什么是生命周期？用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上可以理解。通过一系列实践，现在把所有遇到的

Myth丶恋晨/ 2022年11月18日 05:51/ 0 赞/ 224 阅读

相关 Vue生命周期中mounted和created的区别

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的d

落日映苍穹つ/ 2022年09月10日 06:11/ 0 赞/ 271 阅读

相关关于Vue实例的生命周期created和mounted的区别

什么是生命周期 > Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通

旧城等待，/ 2022年03月30日 17:07/ 0 赞/ 258 阅读

相关关于Vue实例的生命周期created和mounted的区别

转载至:[https://segmentfault.com/a/1190000008570622][https_segmentfault.com_a_1190000008570

墨蓝/ 2022年03月15日 00:40/ 0 赞/ 264 阅读

相关 vue中 created 和 mounted 钩子的区别

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。首先来看下官方解释，官方解释说cr

缺乏、安全感/ 2022年02月04日 06:23/ 0 赞/ 435 阅读

相关 Vue中mounted和created的区别

Vue中mounted和created的区别一、什么是生命周期？用通俗的语言来说，就是Vue中实例或者组件从创建到消灭中间经过的一系列过程。虽然不太严谨，但是也基本上...

朱雀/ 2020年07月02日 07:32/ 0 赞/ 1000 阅读