vue3中生命周期的用法

在Vue3中，生命周期的使用方式有两种：选项式生命周期和组合式生命周期。

选项式生命周期是指在Vue组件的选项中定义的生命周期钩子函数，如beforeCreate、created、beforeMount、mounted等。这些钩子函数可以在组件的不同阶段执行相关逻辑操作。

而组合式生命周期是指使用组合式API来编写的生命周期函数。在Vue3的Composition API中，我们可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted等函数来定义组件的生命周期钩子。组合式生命周期钩子与选项式生命周期钩子有着对应关系，但是它们是独立的函数，可以更方便地组合相关逻辑，并且使得代码更易于理解和复用。

在Vue3中，选项式生命周期和组合式生命周期可以共存。当组件同时定义了选项式生命周期和组合式生命周期钩子时，它们的执行顺序是按照以下顺序进行的：

1. beforeCreate（选项式） -> onBeforeMount（组合式）
2. created（选项式） -> onMounted（组合式）
3. beforeMount（选项式）
4. mounted（选项式）
5. onBeforeUpdate（组合式）
6. beforeUpdate（选项式）
7. updated（选项式）-> onUpdated（组合式）
8. onBeforeUnmount（组合式）
9. beforeUnmount（选项式）
10. unmounted（选项式）-> onUnmounted（组合式）