一、核心定义
Vue 组件的生命周期，指的是 单个.vue文件（组件）从创建、挂载、更新到销毁的完整过程。在这个过程的不同关键节点，Vue 会自动调用对应的「生命周期钩子函数」，允许开发者在特定时机执行自定义逻辑（如发起请求、操作DOM、清理资源等）。
核心逻辑：每个.vue文件就是一个独立组件，浏览器对组件的操作仅3类------加载显示 → 数据更新刷新 → 关闭/切换删除，生命周期就是把这3类操作拆分成精确的时间点，供开发者介入。
二、Vue 3 生命周期钩子（组合式API，官方标准）
Vue 3 采用组合式API（<script setup>），取消了Vue 2中的beforeCreate、created，改用setup替代，其余钩子命名更语义化，核心钩子共7个（含setup），按执行顺序排列如下：
1. 核心钩子详情（含浏览器对应行为）
| 生命周期钩子 | 执行时机 | 浏览器真实行为 | 肉眼可见状态 | 常用场景 |
|---|---|---|---|---|
| setup | 组件实例刚创建，DOM未生成、数据未挂载 | 下载组件代码，开始初始化组件实例 | 页面空白，无任何组件相关内容 | 初始化响应式数据、定义方法、发起异步请求（替代Vue 2的beforeCreate+created） |
| onBeforeMount | 组件模板编译完成，即将挂载到DOM | 已解析组件模板，生成虚拟DOM，未插入页面 | 页面空白，仍看不到组件 | 极少使用，可做挂载前最后的准备（如临时数据处理） |
| onMounted | 组件已挂载到页面，真实DOM生成完成 | 将虚拟DOM渲染为真实DOM，插入页面中 | 组件正常显示在页面上，可交互 | 最常用：操作DOM、初始化第三方插件（ECharts/地图）、发起需要DOM的请求 |
| onBeforeUpdate | 响应式数据发生变化，DOM即将重新渲染 | 已检测到数据变化，准备重新计算DOM结构 | 页面显示旧内容，未更新 | 获取更新前的DOM状态（极少使用） |
| onUpdated | 数据更新完成，DOM重新渲染完毕 | 根据新数据，重新渲染真实DOM并更新页面 | 页面显示新内容，与最新数据一致 | 操作更新后的DOM（注意：避免在此修改数据，防止死循环） |
| onBeforeUnmount | 组件即将被卸载，实例仍可用 | 准备将组件的DOM从页面移除，释放相关资源 | 组件仍显示在页面上，未消失 | 最常用：清理资源（清除定时器、取消事件监听、销毁第三方实例），防止内存泄漏 |
| onUnmounted | 组件已完全卸载，实例不可用 | 组件DOM彻底从页面移除，实例被销毁 | 组件从页面消失，无任何痕迹 | 做最后的资源清理（极少使用） |
2. 生命周期完整执行顺序
-
首次加载（组件创建+挂载）：setup → onBeforeMount → onMounted
-
数据更新（组件刷新）：onBeforeUpdate → onUpdated（数据变化时重复执行）
-
组件销毁（卸载）：onBeforeUnmount → onUnmounted
3. Vue 2 与 Vue 3 钩子对应关系（补充）
| Vue 2 钩子 | Vue 3 对应钩子 | 说明 |
|---|---|---|
| beforeCreate | setup | Vue 3 中 setup 替代了这两个钩子，执行时机包含两者 |
| created | setup | Vue 3 中 setup 替代了这两个钩子，执行时机包含两者 |
| beforeMount | onBeforeMount | 执行时机、作用完全一致 |
| mounted | onMounted | 执行时机、作用完全一致 |
| beforeUpdate | onBeforeUpdate | 执行时机、作用完全一致 |
| updated | onUpdated | 执行时机、作用完全一致 |
| beforeDestroy | onBeforeUnmount | 命名更语义化，作用完全一致 |
| destroyed | onUnmounted | 命名更语义化，作用完全一致 |
三、Vue 3 生命周期 完整可执行代码
<template>
<div class="life-cycle">
<h2>Vue 3 生命周期完整演示</h2>
<p>当前计数：{{ count }}</p>
<button @click="addCount">点击更新数据（触发更新生命周期）</button>
</div>
</template>
<script setup>
// 引入Vue 3生命周期钩子（组合式API）
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from 'vue'
// setup 执行（替代 beforeCreate + created）
console.log('🔴 1. setup 执行（组件初始化，数据/方法定义）')
// 定义响应式数据
const count = ref(0)
// 定义方法（触发数据更新）
const addCount = () => {
count.value++
}
// 挂载前
onBeforeMount(() => {
console.log('🟠 2. onBeforeMount（模板编译完成，即将挂载DOM）')
})
// 挂载完成（最常用）
onMounted(() => {
console.log('🟢 3. onMounted（组件已挂载，可操作DOM/初始化插件）')
})
// 更新前
onBeforeUpdate(() => {
console.log('🔵 4. onBeforeUpdate（数据已变，DOM即将刷新）')
})
// 更新完成
onUpdated(() => {
console.log('🟣 5. onUpdated（DOM已刷新，页面显示新内容）')
})
// 卸载前（最常用，清理资源）
onBeforeUnmount(() => {
console.log('🟡 6. onBeforeUnmount（组件即将销毁，清理资源）')
// 示例：清除定时器、取消事件监听等
})
// 卸载完成
onUnmounted(() => {
console.log('⚫ 7. onUnmounted（组件已完全销毁）')
})
</script>
<style scoped>
.life-cycle {
padding: 20px;
font-size: 16px;
}
button {
padding: 6px 12px;
margin-top: 10px;
cursor: pointer;
}
</style>四、具体来说都有什么场景
1. 发起网络请求
时机：setup 或 onMounted（推荐onMounted，若请求无需依赖DOM，可在setup中发起）
原因：setup中已初始化数据，onMounted中DOM已就绪，可避免请求完成后DOM未渲染的问题。
2. 操作DOM / 初始化第三方插件（ECharts、地图等）
时机：必须在 onMounted 中
原因：只有onMounted触发时，真实DOM才已生成，才能获取DOM元素（如ref引用），避免获取不到DOM的报错。
3. 清理资源（防止内存泄漏）
时机：必须在 onBeforeUnmount 中
常见场景：清除定时器、取消事件监听（如window.scroll、window.resize）、销毁第三方插件实例（如ECharts实例）。
4. 数据更新后操作DOM
时机：onUpdated 中
注意：不可在此钩子中修改响应式数据，否则会反复触发onUpdated，造成死循环。
五、关键注意事项（避坑重点）
-
setup 中不能操作DOM：此时DOM未生成，无法获取ref或真实DOM元素。
-
onUpdated 中避免修改数据：修改数据会再次触发更新，导致死循环。
-
资源清理必须在 onBeforeUnmount 中：若不清理定时器、事件监听等，组件销毁后仍会占用内存，造成内存泄漏。
-
父子组件生命周期顺序（面试高频）：
-
挂载：父 setup → 子 setup → 子 onBeforeMount → 子 onMounted → 父 onMounted
-
销毁：父 onBeforeUnmount → 子 onBeforeUnmount → 子 onUnmounted → 父 onUnmounted
-
-
组件生命周期 = 浏览器对组件"加载 → 更新 → 销毁"的全过程，Vue 钩子只是在关键节点提供的"介入入口"。
-
核心重点记3个钩子：setup（初始化）、onMounted（操作DOM/插件）、onBeforeUnmount（清理资源），覆盖90%工作场景。
-
组合式API（<script setup>）是Vue 3官方推荐写法，钩子需手动引入，执行顺序固定，逻辑清晰。
课后习题：
vue3中组合式API和选项式API分别都是什么，都有哪些区别？