Vue3/ Vue3 和 Vue2 生命周期函数不同点 总结、Vue2 和 Vue3 里面父组件的生命周期顺序

一 .Vue3.x 和 Vue2.x 生命周期函数不同点 总结

Vue2------------------vue3
beforeCreate     -> setup()                     开始创建组件之前执行
created              -> setup()                     开始创建组件之前执行
beforeMount     -> onBeforeMount      组件挂载到节点上之前执行的函数 
mounted            -> onMounted             组件挂载完成后执行的函数 
beforeUpdate    -> onBeforeUpdate    组件更新之前执行的函数
updated             -> onUpdated              组件更新完成之后执行的函数
beforeDestroy  -> onBeforeUnmount 组件死亡(卸载)之前执行的函数
destroyed         -> onUnmounted         组件完全死亡(卸载)后执行的函数
activated           -> onActivated            生命周期钩子函数 被激活时执行 
deactivated       -> onDeactivated       从A组件 切换 到 B 组件 A组件消失时执行
errorCaptured  -> onErrorCaptured  当捕获一个子孙组件的异常时激活钩子函数

总结: 

1.Vue3 组合式api取消了 beforeCreated 和 created 钩子函数 ， 采用steup钩子代替 且里面不能使用 this 

2.Vue3里面的组件销毁的钩子函数换成了 beforeUnmount 和 unmounted 之前是 destroyed 但是要注意 如果Vue3 使用 Vue2 的选择式写法 之前的钩子函数还是可以使用

3.Vue3的组合式api生命周期函数 要比Vue2 选择式 api 的生命周期多个前缀 on ，而且要 import 单独引入

二. Vue2.x 和 Vue3.x  里面父组件的生命周期顺序

Vue2.x

创建: 父beforeCreate ==> 父created ==> 父beforeMOUNT ==> 子beforeCreate ==> 子created  ==> 子beforMount ==> 子mounted ==> 父mounted

更新: 父beforeUpdate ==> 子beforeUpadate ==> 子updated ==> 父updated

销毁: 父beforeDestroy ==> 子beforeDestroy ==> 子destroyed ==> 父destroyed

Vue3.x

父setup ==> onBforeMout ==> 子setup ==> 子onBeforeMount ==> 子onMounted ==> 父onMounted  (父最后挂载到页面上)