Vue的生命周期

Vue2生命周期

废话不多说，先直接上图

图上已经描绘的很清楚了，接下来我再总结一下：

首先创建一个vue实例

然后会初始化这个实例的所有的生命周期函数

接着会进行第一个生命周期beforecreate，这时只是初始化完成了主要的生命周期函数而已，实例中的data和methods尚未初始化

然后会进行created,这时data和methods已经初始化好了；一般在这里会发送Ajax请求

接着会进行编译vue的指令，同时渲染HTML结构，生成虚拟dom，但是还没有渲染到页面上

然后会进行第三个生命周期函数beforeMount，这时候将要把内存中的HTML结构渲染到页面上，但是还没有真正的渲染，所以页面上还是空白的，不能操作dom

接着是第四个生命周期mounted，也创建阶段最后一个生命周期，此时对dom的操作都有效，可以在此初始化一些js的插件

然后当data中的数据发生变化时，会依次调用beforeUpdate和update

首先beforeUpdate时，表示data中的数据已经发生了变化，data数据已经是最新的了，但是，用户看到的页面上的数据依然是老数据

接着updated表示页面已经完成了更新，此时页面和data但是最新的

最后当组件被销毁时，也会触发两个生命周期

首先beforDestroy表示vm实例即将被摧毁，所以此时vm实例还存在，可以在此时做一些收尾操作，比如关闭定时器，取消订阅消息，解绑自定义事件等

destoryed表示此时vm实例已经被摧毁了，无法正常工作了

接下来讲讲vue3的生命周期，基本上与vue2类似

Vue3生命周期

还是直接上图

直接接拿来与Vue2对比一下就很清晰看出区别了：

Vue2生命周期	Vue3生命周期
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

以及特殊钩子

Vue2	Vue 3
activated	deactivated
onActivated	onDeactivated
errorCaptured	onErrorCaptured

​
​
​
​