1. setup() – 组件创建

这是Vue3新增的钩子，最先执行。相当于Vue2中的beforeCreate和created合并。

用途： 在这里初始化响应式数据、计算属性、方法等。

注意： 在这个阶段，DOM元素还不存在，组件实例也没有完全创建。

2. onBeforeMount() – 挂载前

在组件挂载到DOM之前执行。

用途： 可以访问响应式数据，但DOM还未生成。

注意： 很少使用，因为setup()和onMounted()通常能满足需求。

3. onMounted() – 挂载完成

组件已经被挂载到DOM后触发。

用途： 访问DOM元素、发送API请求、初始化第三方库等。

注意： 这是最常用的生命周期钩子之一。

4. onBeforeUpdate() – 更新前

在响应式数据变化后，DOM重新渲染和打补丁之前调用。

用途： 在DOM更新前访问现有DOM状态。

注意： 避免在这个钩子中修改状态，可能导致无限循环。

5. onUpdated() – 更新完成

在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

用途： 执行依赖于DOM更新的操作。

注意： 避免在这里修改状态，可能导致无限更新循环。

6. onBeforeUnmount() – 卸载前

在卸载组件实例之前调用。

用途： 清理定时器、取消事件监听、取消网络请求等。

注意： 这是清理操作的理想位置。

7. onUnmounted() – 卸载完成

卸载组件实例后调用。

用途： 执行最终的清理工作。

注意： 此时组件所有功能都已停止，无法访问任何数据。

8. 特殊钩子 (Keep-alive)

onActivated(): 当被keep-alive缓存的组件激活时调用

onDeactivated(): 当被keep-alive缓存的组件失活时调用