Vue 3 的生命周期基于 Composition API 提供钩子函数，描述组件从创建、挂载、更新、缓存、卸载的完整流程。核心钩子包括 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等。相较于 Vue 2，Vue 3 生命周期逻辑更内聚，搭配组合式 API 具备更强的代码复用性和性能优势。
Vue 3 组件的生命周期分为挂载、更新、卸载、缓存、错误处理五大阶段，所有钩子函数都需要从 vue 中导入，且只能在 setup 语法中使用。
重要修正：
setup()是组合式 API 入口函数，不属于生命周期钩子，它在所有钩子执行前运行。
描述：组件实例初始化后、DOM 渲染前执行，是 Vue 3 组件的代码入口
用途：声明响应式数据、定义方法、注册生命周期钩子、编写业务逻辑
示例：
<script setup>
import { ref } from 'vue'
// 声明响应式数据
const message = ref('Hello Vue 3!')
</script>
<template>
<p>{{ message }}</p>
</template>组件从创建到插入 DOM 树的阶段，仅执行1 次。
描述：组件挂载到 DOM 树之前执行，此时虚拟 DOM 已创建，真实 DOM 未生成
用途：数据预处理、发起初始数据请求、设置全局状态
示例：
<script setup>
import { ref, onBeforeMount } from 'vue'
const data = ref(null)
// 模拟接口请求
const fetchData = () => new Promise(resolve => resolve('初始化数据'))
onBeforeMount(async () => {
data.value = await fetchData()
console.log('组件即将挂载，数据已预处理')
})
</script>描述：组件挂载到 DOM 树之后执行，真实 DOM 已渲染完成
用途：操作 DOM 元素、初始化第三方库、绑定原生事件、开启定时器
示例：
<script setup>
import { ref, onMounted } from 'vue'
// 获取 DOM 引用
const domRef = ref(null)
onMounted(() => {
// 安全访问 DOM
domRef.value.textContent = 'DOM 渲染完成'
console.log('组件已挂载到 DOM 树')
})
</script>
<template>
<div ref="domRef"></div>
</template>组件响应式数据变化，触发 DOM 重新渲染时执行，可执行多次。
描述：数据变化后、DOM 重新渲染之前执行
用途：缓存更新前的 DOM 状态、预处理更新数据、性能优化
示例：
<script setup>
import { ref, onBeforeUpdate } from 'vue'
const count = ref(0)
onBeforeUpdate(() => {
console.log('组件即将更新，当前 count：', count.value)
})
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>描述：组件 DOM 重新渲染完成后执行
用途：更新后操作 DOM、同步第三方库状态、获取最新 DOM 数据
示例：
<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
console.log('组件更新完成，最新 count：', count.value)
})
</script>
<template>
<button @click="count++">{{ count }}</button>
</template>组件从 DOM 树中移除时执行，仅执行1 次，核心用于清理资源。
描述：组件从 DOM 树卸载之前执行，实例仍可用
用途：保存状态、停止定时器、取消请求
示例：
<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
let timer = null
onMounted(() => {
timer = setInterval(() => console.log('定时器运行中'), 1000)
})
onBeforeUnmount(() => {
// 清理定时器，防止内存泄漏
clearInterval(timer)
console.log('组件即将卸载，资源已清理')
})
</script>描述：组件完全卸载、实例销毁后执行
用途：解绑全局事件、销毁第三方库实例、最终资源释放
示例：
<script setup>
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
window.addEventListener('resize', () => {})
})
onUnmounted(() => {
// 解绑全局事件
window.removeEventListener('resize', () => {})
console.log('组件已卸载')
})
</script>配合 <KeepAlive> 缓存组件使用，是 Vue 3 必备高频知识点。
描述：缓存组件被激活时执行
用途：缓存页面刷新数据、恢复页面状态
描述：缓存组件被失活时执行
用途：暂停定时器、保存页面临时状态
描述：捕获子组件抛出的未处理错误，阻止错误向上冒泡
用途：全局错误监控、友好提示、错误日志上报
示例：
<script setup>
import { onErrorCaptured } from 'vue'
onErrorCaptured((err, instance, info) => {
console.error('捕获组件错误：', err)
console.log('错误来源组件：', instance)
console.log('错误类型：', info)
// 返回 false 阻止错误继续传播
return false
})
</script>组件初始化 → setup 执行
挂载阶段：onBeforeMount → onMounted
更新阶段（多次）：onBeforeUpdate → onUpdated
缓存组件：onActivated（激活）/ onDeactivated（失活）
卸载阶段：onBeforeUnmount → onUnmounted
错误捕获：onErrorCaptured（触发错误时执行）
为了清晰理解生命周期钩子与常见编程概念的区别，总结如下：
场景：Vue 框架预设的组件流程节点回调函数
特点：由框架自动调用，执行时机固定，只能在 setup 中注册
用途：在组件特定阶段插入自定义业务逻辑
场景：DOM 编程中利用事件冒泡实现的事件优化方案
特点：将子元素事件绑定到父元素，减少事件监听器数量
用途：动态生成元素的事件处理、提升页面性能
场景：ES 6 原生对象，Vue 3 响应式系统的核心
特点：拦截对象的属性读写、删除等操作，实现数据监听
用途：Vue 3 响应式原理、数据劫持、权限控制
场景：作为参数传递给其他函数，延迟执行的函数
特点：异步编程核心，执行时机由业务逻辑决定
用途：定时器、网络请求、事件监听、钩子函数底层实现
核心规范：Vue 3 生命周期钩子必须导入使用，setup 是入口而非钩子；
执行次数：挂载 / 卸载 / 缓存钩子仅执行 1 次，更新钩子可执行多次；
核心用途：onMounted 操作 DOM，onUnmounted 清理资源，onErrorCaptured 处理错误；
必备补充：<KeepAlive> 配合 onActivated/onDeactivated 实现缓存组件逻辑。