由于Vue3.0中新增了Composition-API，所以其生命周期自然也发生一些改变。
vue团队依旧在vue3中保留了Options API，所以你依旧可以在Vue3中使用vue2相同的钩子函数。
Vue3生命周期示图
Vue3中使用Composition-API的钩子函数映射
左边的为Options API生命周期钩子，右边的为Composition-API在setup()中使用生命周期钩子
常用的生命周期
beforeCreate => setup()
created => setup()
beforeMount => onBeforeMount 挂载之前
mounted => onMounted 挂载之后
beforeUpdate => onBeforeUpdate 数据更新之前
updated => onUpdated 数据更新之后
beforeDestroy => onBeforeUnmount 组件卸载之前
destoryed => onUnmounted 组件卸载之后
在Composition-API中没有beforeCreate、created,相对应的数据初始化的操作可以在setup()中完成。
特殊的生命周期
在vue中其实还有几个比较有意思的钩子函数
activated => onActivated
deactivated => onDeactivated
renderTracked => onRenderTracked
renderTriggered => onRenderTriggered
errorCaptured => onErrorCaptured
-
在某个组件被
<keep-alive>标签包裹时，第一次显示该组件时，会触发setup()和onActivated。在第二次显示该组件时，由于是从缓存中调取的，所以不会再次触发setup()，只会触发onActivated。 -
在切换为其他组件时由于
<keep-alive>包裹缓存，所以不会触发onBeforeUnmount和onUnmounted而是触发了onDeactivated。 -
onRenderTracked它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。 -
onRenderTriggered它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。生成的event对象其中包含key(那边变量发生了变化)、newValue(更新后变量的值)、oldValue(更新前变量的值)、target(目前页面中的响应变量和函数)。 -
onErrorCaptured它会捕获子孙组件的异常报错，可以在这个函数中自定义处理错误信息。如果onErrorCaptured钩子自身抛出了一个错误，那么这个新的错误和原本捕获到的错误都会发送给全局的config.errorHandle。
以上就是Vue3的生命周期了。
如有讲的不对的或者遗漏的地方，欢迎指出！我会及时做出修正！！