前言
生命周期是Vue组件的运行全过程：组件从创建、挂载、更新、渲染、销毁的完整流程。
所有项目的接口请求、数据初始化、定时器创建、事件监听、资源销毁，全部依赖生命周期钩子实现。
90%新手开发BUG、性能问题，都是因为生命周期时机用错：提前请求导致数据为空、定时器不销毁造成内存泄漏、更新逻辑错乱等。
本篇系统性吃透Vue3全部生命周期钩子、执行顺序、业务场景、避坑要点，结合组合式API实战落地。
一、什么是生命周期（通俗定义）
生命周期：Vue组件从诞生到消亡的完整生命周期，框架内置的自动执行函数，不同阶段对应不同钩子。
核心价值：让开发者可以在指定的阶段执行指定的代码，精准控制组件行为。
二、Vue3完整生命周期钩子（组合式API版）
Vue3组合式API抛弃了选项式的分散钩子，统一导入使用，执行顺序与选项式一致，适配现代开发。
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
三、六大核心钩子+业务实战场景
1. onBeforeMount（挂载前）
组件DOM未生成、模板未渲染，无法操作DOM。适合做数据预处理、参数校验。
2. onMounted（挂载完毕｜最常用）
企业开发核心钩子：组件DOM渲染完成、页面结构生成完毕。
唯一合法业务场景：页面初始化接口请求、DOM操作、定时器创建、事件监听。
onMounted(() => { // 页面加载完成后请求文章列表接口 getArticleList() // 初始化DOM操作 initDomEvent() })
3. onBeforeUpdate（更新前）
数据变化后、页面重新渲染前触发，可获取更新前的DOM状态。
4. onUpdated（更新完毕）
数据更新、页面DOM重新渲染完成后触发，适合更新后DOM二次操作。
5. onBeforeUnmount（销毁前）
组件卸载前触发，组件DOM还存在，适合清理资源前置操作。
6. onUnmounted（销毁完毕｜性能优化核心）
组件彻底销毁、DOM移除，核心用途：清除定时器、移除事件监听、终止请求，杜绝内存泄漏。
let timer = null onMounted(() => { timer = setInterval(() => { console.log("定时任务") }, 1000) }) // 页面销毁清除定时器，完美解决内存泄漏 onUnmounted(() => { clearInterval(timer) timer = null })
四、生命周期完整执行顺序（必背）
创建阶段：setup 执行 → onBeforeMount → onMounted
更新阶段：数据变更 → onBeforeUpdate → onUpdated
销毁阶段：组件卸载 → onBeforeUnmount → onUnmounted
五、新手高频避坑指南（实战干货）
禁止在setup顶层操作DOM：此时DOM未挂载，获取不到节点
所有接口请求统一放onMounted：保证页面渲染完成后再请求数据
所有定时器/监听必须在onUnmounted销毁：杜绝内存泄漏
不要在onUpdated频繁修改数据：容易造成无限更新死循环
六、面试高频问答（满分话术）
1. 页面初始化请求放在哪个生命周期？为什么？
放在onMounted，此时组件DOM挂载完成，页面结构就绪，可正常渲染请求数据，同时避免挂载前数据为空、DOM获取失败的问题。
2. 如何避免Vue组件内存泄漏？
在组件销毁钩子onUnmounted中，手动清除定时器、移除全局事件监听、终止未完成的异步请求，释放页面占用资源。
3. onMounted和onUpdated区别？
onMounted仅页面首次挂载完成执行一次；onUpdated每次数据更新、DOM重渲染后都会重复执行。
七、本篇结语
生命周期是Vue组件运行的底层调度核心，也是区分新手和熟练开发者的关键能力。
学完本篇，你可以精准把控组件每一个运行阶段，规范处理接口请求、资源创建与销毁、DOM操作，彻底杜绝项目常见BUG和内存泄漏问题。
至此，Vue3基础核心体系全部学完：模板语法、组件化、组合式API、响应式原理、生命周期，完全具备企业基础项目开发能力。
