Vue生命周期函数

Vue生命周期函数

生命周期让我们在控制整个vue时更容易形成更好的逻辑，可以分为四个阶段，创建阶段，挂载阶段，更新阶段，销毁阶段分别有:

实例创建前：beforeCreate()

只有一些实例本身的事件和生命周期函数

实例创建后：Created()

最早使用data和methods中数据的钩子函数

组件挂载前：beforeMount()

指令已经解析完毕，内存中已经生成dom树

组件挂载后：Mounted()

dom渲染完毕页面和内存的数据已经同步

视图更新前：beforeUpdate()

当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

视图更新后：Updated()

内存和页面都是新的

实例销毁前：beforeDestroy()

即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

实例销毁后：Destroyed()

已经销毁完毕

补充：

errorCaptured()

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

activated()

被 keep-alive 缓存的组件激活时调用。

deactivated()

被 keep-alive 缓存的组件停用时调用。

Vue2和Vue3生命周期有一些区别：

1.beforeCreate -> setup()

开始创建组件之前，创建的是data和method

2.created -> setup()

3.beforeMount -> onBeforeMount

组件挂载到节点上之前执行的函数。

4.mounted -> onMounted

组件挂载完成后执行的函数

5.beforeUpdate -> onBeforeUpdate

组件更新之前执行的函数。

6.updated -> onUpdated

组件更新完成之后执行的函数。

7.beforeDestroy -> onBeforeUnmount

组件挂载到节点上之前执行的函数。

8.destroyed -> onUnmounted

组件卸载之前执行的函数。

9.activated -> onActivated

组件卸载完成后执行的函数

10.deactivated -> onDeactivated