Vue2.x与3.x生命周期

生命周期

一个框架从创建到销毁一系列的过程叫生命周期。
在生命周期的过程中会执行相应的函数叫钩子函数。
生命周期钩子 = 生命周期函数 = 生命周期事件

过程

beforeCreate

开始创建一个vue实例
初始化vue实例，此时初始化的是默认的周期函数和事件
执行beforeCreate()函数，初始化data和methods中的数据

created

执行created()函数，数据初始化完成

beforeMount

编译模板，把vue中的指令进行执行，最终，
在内存中生成一个编译好的模板字符串，
此时只是在内存中渲染好了模板，并没有渲染页面中
执行beforeMount()，模板已经编译完成，但尚未把模板渲染到页面中
把刚才在内存中编译好的模板放到页面中去

mounted

执行mounted()函数，组件创建完成

beforeUpdate

当data中的数据改变时执行beforeUpdate()函数更新内存中的数据
渲染DOM树，并返回页面

updated

执行updated()函数，数据更新完成，页面显示最新的数据

beforeDestroy

执行beforeDestroy()，从运行阶段进入销毁阶段，实例中的指令、过滤器、data中的数据和methods中的方法还处于可用状态，没有真正销毁

destroyed

执行destroy()函数，被销毁完毕

Vue3.x的生命周期

Vue3.x中生命周期beforeDestroy和destroyed，换成了beforeUnmount和unmounted