首先,我们回顾一下 vue2中生命周期的使用
父组件:  子组件: beforeUnmount = beforeDestory unmounted = destoryed  直接打印结果  现在我们再来测试一下 compositionApi 的使用
vue3可以 vue2通用,所以我们在 vue2文件中测试 vue3生命周期   打印结果 
vue3中的生命周期:
- setup() :开始创建组件之前,在beforeCreate和created之前执行。创建的是data和method
- onBeforeMount() : 组件挂载到节点上之前执行的函数。
- onMounted() : 组件挂载完成后执行的函数。
- onBeforeUpdate(): 组件更新之前执行的函数。
- onUpdated(): 组件更新完成之后执行的函数。
- onBeforeUnmount(): 组件卸载之前执行的函数。
- onUnmounted(): 组件卸载完成后执行的函数。
还有以下三个不常用的:
- onActivated(): 被包含在中的组件,会多出两个生命周期钩子函数。被激活时执行。
- onDeactivated(): 比如从 A 组件,切换到 B 组件,A 组件消失时执行。
- onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数(以后用到再讲,不好展现)。
vu3和 vue2生命周期的对比
Vue2 | vue3 |
---|
beforeCreate | setup() | created | setup() | beforeMount | onBeforeMount | mounted | onMounted | beforeUpdate | onBeforeUpdate | updated | onUpdate d | beforeDestroy / unmount | onMount | destroyed / unmounted | onUnmounted |
|