第二大脑

主题

2026-08-24
539
2.1m

概念卡片：Vue3 生命周期 ​

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

完整钩子对照（Vue2 → Vue3） ​

Vue2（选项式）Vue3（组合式）变化
beforeCreate🚫 无（由 setup() 取代）删除
created🚫 无（由 setup() 取代）删除
beforeMountonBeforeMount加 on 前缀
mountedonMounted加 on 前缀
beforeUpdateonBeforeUpdate加 on 前缀
updatedonUpdated加 on 前缀
beforeDestroyonBeforeUnmount更名（销毁→卸载）
destroyedonUnmounted更名（销毁→卸载）
activatedonActivated<keep-alive> 用，基本不变
deactivatedonDeactivated<keep-alive> 用，基本不变
errorCapturedonErrorCaptured加 on 前缀

关键代码示例 ​

js
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 同步执行阶段调用才有效。

关联 ​

最近更新