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）