vue2和 vue3生命周期区别（optionsAPI 和 composition API区别）

首先，我们回顾一下 vue2中生命周期的使用

父组件：

子组件：
beforeUnmount = beforeDestory
unmounted = destoryed

直接打印结果

现在我们再来测试一下 compositionApi 的使用

vue3可以 vue2通用，所以我们在 vue2文件中测试 vue3生命周期


打印结果

vue3中的生命周期：

1. setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
2. onBeforeMount() : 组件挂载到节点上之前执行的函数。
3. onMounted() : 组件挂载完成后执行的函数。
4. onBeforeUpdate(): 组件更新之前执行的函数。
5. onUpdated(): 组件更新完成之后执行的函数。
6. onBeforeUnmount(): 组件卸载之前执行的函数。
7. onUnmounted(): 组件卸载完成后执行的函数。

还有以下三个不常用的：

8. onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
9. onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
10. onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数（以后用到再讲，不好展现）。

vu3和 vue2生命周期的对比

Vue2	vue3
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdate d
beforeDestroy / unmount	onMount
destroyed / unmounted	onUnmounted