概念卡片：Vue3 生命周期

一句话机制：生命周期是组件从「创建 → 挂载 → 更新 → 卸载」的钩子序列；Vue3 在组合式 API 里把钩子改成 on 前缀 + 从 vue 导入 + 在 setup 中调用，并且 setup() 本身取代了 Vue2 的 beforeCreate / created。

完整钩子对照（Vue2 → Vue3）

Vue2（选项式）	Vue3（组合式）	变化
beforeCreate	🚫 无（由 setup() 取代）	删除
created	🚫 无（由 setup() 取代）	删除
beforeMount	onBeforeMount	加 on 前缀
mounted	onMounted	加 on 前缀
beforeUpdate	onBeforeUpdate	加 on 前缀
updated	onUpdated	加 on 前缀
beforeDestroy	onBeforeUnmount	更名（销毁→卸载）
destroyed	onUnmounted	更名（销毁→卸载）
activated	onActivated	<keep-alive> 用，基本不变
deactivated	onDeactivated	<keep-alive> 用，基本不变
errorCaptured	onErrorCaptured	加 on 前缀

关键代码示例

import { onMounted, onBeforeUnmount } from 'vue'

onMounted(() => {
  console.log('挂载完成，可发请求、加事件监听')
})

onBeforeUnmount(() => {
  console.log('卸载前，清理定时器、移除监听')
})

在 <script setup> 里可直接在顶层调用生命周期函数，无需包裹在 setup() 里。

挂载执行顺序

setup()  →  onBeforeMount  →  onMounted

不变量（必须成立的约束）

• setup() 在组件初始化时执行，取代 beforeCreate + created；响应式数据要在 setup 里定义。
• 组合式 API 的钩子必须从 vue 导入（import { onMounted } from 'vue'），不能凭空调用。
• 同一钩子可多次调用（多个 onMounted 都会执行，便于按逻辑分组）——Vue2 每个钩子只能定义一次。
• 卸载钩子名是 onBeforeUnmount / onUnmounted（不是 onBeforeDestroy）。
• 新增调试钩子 onRenderTracked / onRenderTriggered（渲染依赖追踪，底层用，开发少用）。

踩坑案例

• 现象：从 Vue2 迁移，beforeDestroy 里清定时器，升级 Vue3 后钩子不执行。 原因：Vue3 已更名 onBeforeUnmount。解决：全局替换 beforeDestroy → onBeforeUnmount、destroyed → onUnmounted。

常见误解

• 把 onMounted 和 mounted 混为一谈 → Options API 里保留 mounted 原名，Composition API 里才用 onMounted。
• 在 setup() 之外调用生命周期钩子 → 组合式钩子必须在 setup 同步执行阶段调用才有效。

关联

• 总览：Vue3技术栈总览
• 响应式：概念卡片：Vue3响应式原理
• 源：B40-资源/语雀-Leo的知识库/框架与vue3/05_Vue3/05_Vue生命周期/Vue2和Vu3的生命周期区别