vue—生命周期

生命周期是组件从创建到销毁的一系列钩子函数，可在特定的时间状态下执行代码。这些钩子函数提供了对组件生命周期的直接访问，使开发者可在不同的阶段执行自己的逻辑。

一、基本内容

vue2和vue3的生命周期有所不同，但基本概念一致。

阶段	vue2	vue3	触发时机	特点
创建阶段	beforeCreate	beforeCreate	实例初始化之后，数据观测和事件配置之前	无法访问data、computed、methods等
创建阶段	created	created	实例创建完成后	可以访问数据，未挂载DOM
挂载阶段	beforeMount	beforeMount	挂载开始之前	render函数首次被调用，已生成虚拟DOM，未渲染
挂载阶段	mounted	mounted	实例被挂载到DOM之后	可以访问真实DOM，一般在这一阶段请求加载初始数据
更新阶段	beforeUpdate	beforeUpdate	数据变化导致DOM重新渲染之前	可以在更新前访问现有DOM状态
更新阶段	updated	updated	DOM重新渲染后	避免在这一阶段修改数据，可能导致无限循环
卸载阶段	beforeDestroy	beforeUnmount	实例卸载之前	清理前的最后时机
卸载阶段	destroyed	unmounted	实例卸载完成之后	清除计时器、取消订阅、解绑监听事件等

二、setup

setup是vue3组合式API（Composition API）的入口函数，它在组件实例创建之前执行，是组合式API的核心。

setup本身相当于：beforeCreate+created。

当setup与beforeCreate/created同时使用时的执行顺序：setup--->beforeCreate--->created。

常见使用方式：<script setup>语法糖

在setup中使用生命周期函数时需要加前缀on：mounted------onMounted、updated------onUpdated等。

三、父子组件生命周期执行顺序

挂载阶段 ：父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate**→**

子 created → 子 beforeMount → 子 mounted → 父 mounted

更新阶段：父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated

卸载阶段：父 beforeUnmount → 子 beforeUnmount → 子 unmounted → 父 unmounted

四、keep-alive

<keep-alive>是Vue 内置的一个抽象组件，用于缓存不活动的组件实例，而不是销毁它们。它可以保留组件状态，避免重复渲染，提升性能。

<keep-alive> 包裹的组件会增加 activated 和 **deactivated**的钩子函数。

activated：组件被激活（从缓存中被恢复）时触发

deactivated：组件被停用（进入缓存）时触发

keep-alive包裹的组件触发顺序：

1）首次进入：onMounted→onActivated

2）切换到其他页面：onDeactivated

3）再次进入：onActivated（不会再触发onMounted）