Vue生命周期详解图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、什么是vue的生命周期？

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，简单理解一下就是人从来到这个世界一直到离开这个世界中要做的事情

二、vue生命周期分几部分？并都做了什么？

beforeCreate(创建前)：
此阶段为实例初始化之后，this指向创建的实例，但是data中的数据、methods中的方法，以及watcher中的事件都不能获得。
created(创建后)：
此阶段为实例初始化之后，data中的数据等方法的初始化导入完成，
注：要调用methods中的方法，或者操作data中的数据，最早只能在Created中操作

beforeMount(挂载前)：
模板已经在内存中编译好了，但是未挂载到页面中，这时候还是虚拟dom
mounted(挂载后)：
要执行完mounted,就表示整个Vue实例已经初始化完成了，此时组件已经脱离里了创建阶段， 进入到了运行阶段，虚拟dom已经被换成了真实的dom

beforeUpdate(更新前)：
当执行beforeUpdate的时候，页面中显示的数据还是旧的，此时date数据是最新的，页面尚未和最新数据数据保持同步
updated(更新后)：
updated执行时数据已经保持同步了，都是最新的
注：在这个生命周期中，不能修改数据，否则会进入死循环

beforeDestroy(销毁前)：
可以在这个生命周期中进行定时器的清除、监听事件的销毁、websocket长链接的断开，以保证页面有更好的性能
destroyed(销毁后)：
执行destroy方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及和dom的绑定，实例已经被销毁完毕

三、vue知识补充

1、数据请求可以在brforeCreat（）、created（）、mounted（）中进行请求！
2、在created（）中可以操作dom，但是要把操作方法放在this.$nextTick()，中，因为此时dom还没有挂载，页面中获取不到dom，放在this.$nextTick()是等待dom加载完成后在执行！
3、在updated（）中，不能修改数据，否则会造成死循环！

四、vue生命周期图解