生命周期是组件从创建到销毁的一系列钩子函数可在特定的时间状态下执行代码。这些钩子函数提供了对组件生命周期的直接访问使开发者可在不同的阶段执行自己的逻辑。一、基本内容vue2和vue3的生命周期有所不同但基本概念一致。阶段vue2vue3触发时机特点创建阶段beforeCreatebeforeCreate实例初始化之后数据观测和事件配置之前无法访问data、computed、methods等createdcreated实例创建完成后可以访问数据未挂载DOM挂载阶段beforeMountbeforeMount挂载开始之前render函数首次被调用已生成虚拟DOM未渲染mountedmounted实例被挂载到DOM之后可以访问真实DOM一般在这一阶段请求加载初始数据更新阶段beforeUpdatebeforeUpdate数据变化导致DOM重新渲染之前可以在更新前访问现有DOM状态updatedupdatedDOM重新渲染后避免在这一阶段修改数据可能导致无限循环卸载阶段beforeDestroybeforeUnmount实例卸载之前清理前的最后时机destroyedunmounted实例卸载完成之后清除计时器、取消订阅、解绑监听事件等二、setupsetup是vue3组合式APIComposition API的入口函数它在组件实例创建之前执行是组合式API的核心。setup本身相当于beforeCreatecreated。当setup与beforeCreate/created同时使用时的执行顺序setup—beforeCreate—created。常见使用方式script setup语法糖在setup中使用生命周期函数时需要加前缀onmounted——onMounted、updated——onUpdated等。三、父子组件生命周期执行顺序挂载阶段父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate→子 created → 子 beforeMount → 子 mounted → 父 mounted更新阶段父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated卸载阶段父 beforeUnmount → 子 beforeUnmount → 子 unmounted → 父 unmounted四、keep-alivekeep-alive是Vue 内置的一个抽象组件用于缓存不活动的组件实例而不是销毁它们。它可以保留组件状态避免重复渲染提升性能。keep-alive 包裹的组件会增加activated和deactivated的钩子函数。activated组件被激活从缓存中被恢复时触发deactivated组件被停用进入缓存时触发keep-alive包裹的组件触发顺序1首次进入onMounted→onActivated2切换到其他页面onDeactivated3再次进入onActivated不会再触发onMounted
