Vue的生命周期有几个阶段「vue生命周期钩子函数详解」

什么是vue的生命中周期？

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

Vue的生命周期是有八个阶段

BeforeCreate(创建前)

Created(创建后)

BeforeMount(挂载前)

Mounted(挂载后)

BeforeUpdate(跟新前)

Updated(跟新后)

BeforeDestroy(销毁前)

Destroyed(销毁后)

所以我们一般人的回答就是这八个，我想应该很多人都是这么说的吧。

我记得我有一次面试的时候就是这么回答的，当然那时候刚接触Vue不久，说完这八个生命周期以后，就等着面试官问我下一个问题了。

短暂的寂静后，面试官看了我一眼，问道：“就这？ 没有了？”

空气瞬间凝固了，场面一度很尴尬，当然这个面试官还算是好的，会反问一下，很多时候你回答的好与不好，面试官都不会说话，所以这个时候我们该做的就是回答的全面一点。

当然面试官肯定考的不是你这八个生命周期这么简单，当然是想了解到在生命周期分别做了那些事情，可以做那些事情。

beforeCreate — 生命周期为创建前的时候el和data都还没有初始化，所以也不能访问 data、computed、 watch、 methods的方法和数据

Created — 生命周期为创建后的时候，data初始化完成了已经，像data、computed、watch、methods上的方法和数据都是可以访问的。

但是el还不能访问，这个时候可以做一些初始化的代码，比如进行axios请求等 （但是这个时候页面还没有被渲染出来，如果请求时间过长的时候会出现白屏的状态）

beforeMount — 当生命周期为挂载前的时候，data和el都已经完成了初始化，但是页面中的内容还是Vue 的占位符，data里面的数据还没有挂载到dom节点上

Mounted — 当生命周期是挂载后的时候，el已经挂载好了，将上一个阶段写好在内存中的虚拟dom真正挂载到页面上。可以进行dom操作

beforeUpdate — 当生命周期为更新前的时候，这个生命周期是数据更新的时候触发，这个时候更新的数据和模板还没有结合，可以在这个生命周期做数据的最后一次修改。

Updated — 当生命周期为更新后的时候，更新的数据和模板结合完毕

beforeDestroy — 当生命周期为销毁前的时候，此时实例还在还是可以做操作的，在这里可以做一些，移除监听啊，事件解绑什么的。

Destroyed — 当生命周期为销毁后的时候，整个生命周期已经完成了销毁，生命周期数据与视图之间的关系将会断开 这就是差不多在面试的时候你需要说出来的点，特别是Created ，Mounted ，BeforeDestroy 这三个生命周期问得最多，一个是完成初始化，一个是dom加载完成，一个是销毁之前。

如果只是单单说八个生命周期基本上面试官对于你的判断就是没有理解，所以面试时是有必要连同每个周期该做什么事情都要说出来的。

这里有一张图，是Vue官网(https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)给出来的生命周期流程图，可以多研究一下

谈到这里其实还可以延伸一下，面试官可能会问你父子组件的加载顺序是怎样的，就是页面加载的时候 页面包含了子组件需要同时加载，他们的执行顺序是怎样的。

这里先总结一下顺序就是，具体的可以自己多实践一下，这里替大家总结，方便记住

加载渲染过程

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

子组件更新过程

父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

父组件更新过程

父beforeUpdate->父updated

销毁过程

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

如果有错误的地方请指出，我们一起学习进步！

如果对你有帮助，可以转发/收藏，点个赞给个支持一下吧~