vue3生命周期

作者: 栗子daisy | 来源:发表于2020-10-06 16:22 被阅读0次

vue3 的钩子函数基本是再 vue2 的基础上加了一个on,但也有两个钩子函数发生了变化。BeforeDestroy变成了onBeforeUnmount，destroyed变成了onUnmounted（尤大神的介绍是mount比Destroy更形象，也和beforeMount相对应。）
除了这些钩子函数外，Vue3.x还增加了用来调试使用的onRenderTracked和onRenderTriggered函数。
Vue3.x 生命周期在调用前需要先进行引入import { reactive, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, } from "vue";

Vue2	vue3
beforeCreate	setup()	setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
created	setup()
beforeMount	onBeforeMount	组件挂载到节点上之前执行的函数。
mounted	onMounted	组件挂载完成后执行的函数。
beforeUpdate	onBeforeUpdate	组件更新之前执行的函数。
updated	onUpdated	组件更新完成之后执行的函数。
beforeDestroy	onBeforeUnmount	组件卸载之前执行的函数。
destroyed	onUnmounted	组件卸载完成后执行的函数
activated	onActivated	被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
deactivated	onDeactivated	比如从 A 组件，切换到 B 组件，A 组件消失时执行。
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数。