首先，我们回顾一下 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 |