一.Vue3 生命周期 钩子函数 总结

1. 介绍:

Vue组件简介:  Vue是组件haul编程 从一个组件诞生到消亡 会经历很多过程 这些过程就叫做生命周期

例如: 生命周期就是人出生到入土是一样的 有少年时期 青年时期 中年时期 老年时期 每个时期都应该有不同的任务 每个时期可以做不同的任务 

钩子函数: 伴随生命周期 给用户使用的函数 操控的生命周期 主要操控钩子函数

Vue3 的生命周期比较多 然后需要一个概念 "钩子函数"

2.Vue3 内 主要 钩子函数

steup( ) 开始创建组件之前 在beforeCreate 和 created 之前执行 创建的是 data 和 method

onBeforeMount( ) 组件挂载到节点上之前执行的函数 

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

onBeforeUpdate( ) 组件更新之前执行的函数

onUpdated( ) 组件更新完成之后执行的函数

onBeforeUnmount( )  组件死亡(卸载)之前执行的函数

onUnmounted( ) 组件完全死亡(卸载)后执行的函数

onActivated( )  被包含在 <keep-alive> 中的组件 会多出两个生命周期钩子函数 被激活时执行 

onDeactivated( ) 从A组件 切换 到 B 组件 A组件消失时执行

onErrorCaptured( ) 当前捕获一个子孙组件的异常时激活钩子函数

需注意问题:

使用<keep-alive> 组件会将数据保留在内存中 比如不想每次看到一个页面都重新加载 这种场景下就可以使用 <keep-alive> 解决

二. Vue2.x 和 Vue3.x 生命周期钩子函数对比  

Vue2------------------vue3
beforeCreate     -> setup()
created              -> setup()
beforeMount     -> onBeforeMount
mounted            -> onMounted
beforeUpdate    -> onBeforeUpdate
updated             -> onUpdated
beforeDestroy  -> onBeforeUnmount
destroyed         -> onUnmounted
activated           -> onActivated
deactivated       -> onDeactivated
errorCaptured  -> onErrorCaptured

总结: 

通过这样可以对比出 ，Vue的钩子函数基本是在 Vue2 的基础上加了一个 on , 但也有两个钩子函数发生了 变化 分别是 ↓

• BeforeDestroy  ==>  onBeforeUnmount    组件死亡(卸载)之前执行的函数
• destroyed          ==>  onUnmounted           组件完全死亡(卸载)后执行的函数