Vue生命周期函数之123

一、Vue2 核心生命周期钩子（最常用，8 个）

Vue2 的生命周期整体分为4 个阶段，钩子按固定顺序执行，每个阶段对应前后两个钩子（如「创建阶段」对应beforeCreate+created），是开发中最常使用的核心钩子，所有钩子的this都指向当前 Vue 实例。

按执行顺序排列，附执行时机和核心使用场景（结合你之前的代码示例，贴合实际开发）：

阶段	钩子函数	执行时机	核心特性 & 常用场景
创建阶段	beforeCreate	实例初始化后，数据观测（响应式）、方法 / 事件配置前	无法访问data/methods/$el，仅能做一些无依赖的初始化（如全局事件绑定）
	created	实例创建完成，已完成响应式配置、方法 / 事件初始化，挂载未开始	✅ 可访问data/methods；❌ 无$el（无法操作 DOM）【常用】请求初始数据、初始化非 DOM 相关数据
挂载阶段	beforeMount	挂载开始前，模板已编译为虚拟 DOM，$el已生成但未挂载到真实 DOM	✅ 有$el（虚拟 DOM）；❌ 页面仍显示插值表达式（如{{msg}}），未渲染真实值【少用】预修改虚拟 DOM
	mounted	挂载完成，虚拟 DOM 渲染为真实 DOM，el被vm.$el替换	✅ 可访问真实 DOM、操作节点（如获取元素、绑定 DOM 事件）；【最常用】DOM 相关初始化、请求需要 DOM 的数据
更新阶段	beforeUpdate	响应式数据发生变化后，DOM 重新渲染前	✅ data是最新值；❌ 页面 DOM 还是旧值【常用】更新前获取旧 DOM 状态、做更新前校验
	updated	响应式数据变化后，DOM 已完成重新渲染和更新	✅ data和 DOM 均为最新值；【常用】操作更新后的真实 DOM、根据新 DOM 做后续处理（注意避免修改数据导致死循环）
销毁阶段	beforeDestroy	实例销毁前立即调用，实例仍完全可用	✅ 可访问所有属性、方法、DOM；【最常用】清除定时器、解绑自定义事件、销毁第三方插件实例（防止内存泄漏）
	destroyed	实例销毁后调用，所有依赖已解除，所有事件监听器已移除，DOM 节点已解绑	❌ 实例已失效，尽量避免操作；【少用】做最终的资源清理（如清空全局缓存）

核心执行顺序（必记）

初始化挂载：beforeCreate → created → beforeMount → mounted（这是你之前代码中打印的顺序）

数据更新：beforeUpdate → updated（你之前代码中 3 秒后触发的钩子）

实例销毁：beforeDestroy → destroyed（需手动调用vm.$destroy()触发）

二、Vue2 特殊 / 冷门生命周期钩子（2 个）

日常开发使用频率低，仅在特殊场景下用到，了解即可：

1. activated

   ：仅适用于 **

   <keep-alive>

   ** 包裹的组件，组件被

   激活（切回）

   时调用；

   场景：缓存组件切回时，重新请求数据、恢复组件状态。

2. deactivated

   ：仅适用于 **

   <keep-alive>

   ** 包裹的组件，组件被

   失活（切走）

   时调用；

   场景：缓存组件切走时，暂停定时器、保存组件当前状态。

三、Vue3 中的生命周期（2 种写法，兼容 + 新特性）

Vue3 完全兼容 Vue2 的 Options API 钩子（直接写在setup外，用法和 Vue2 一致），但核心推荐Composition API（setup语法），提供了新的钩子函数（本质是 Vue2 钩子的封装，更贴合组合式编程）。

1. Vue3 Options API（兼容写法，和 Vue2 完全一致）

直接在组件配置中写 Vue2 的钩子，无任何变化，适合从 Vue2 迁移的项目：

javascript

import { Vue } from 'vue'
export default {
  data() { return { msg: 'hi' } },
  created() { console.log('创建完成', this.msg) },
  mounted() { console.log('挂载完成，可操作DOM') }
}

2. Vue3 Composition API（setup中使用，推荐）

Vue3 取消了beforeCreate和created，setup函数的执行时机等同于这两个钩子（实例初始化时立即执行），其他钩子需要手动导入后使用，无this（直接访问响应式数据）。

Vue2 钩子	Vue3 Composition API 导入写法	执行时机 / 作用完全一致
beforeCreate/created	setup() 函数本身	✅ 完全替代
beforeMount	onBeforeMount	✅
mounted	onMounted	✅
beforeUpdate	onBeforeUpdate	✅
updated	onUpdated	✅
beforeDestroy	onBeforeUnmount（命名优化）	✅ 作用一致
destroyed	onUnmounted（命名优化）	✅ 作用一致
activated	onActivated	✅
deactivated	onDeactivated	✅

使用示例（Vue3 单文件组件）：

<template>
  <div>{{ msg }}</div>
</template>
​
<script setup>
// 1. 从vue中导入需要的钩子
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
​
// 2. setup函数 = beforeCreate + created，直接写初始化逻辑
const msg = ref('hi vue3') // 响应式数据
console.log('等同于beforeCreate/created', msg.value)
​
// 3. 调用钩子，传入回调函数（无this，直接访问数据）
onMounted(() => {
  console.log('挂载完成，可操作DOM')
})
​
onUpdated(() => {
  console.log('数据更新，DOM已同步')
})
​
onUnmounted(() => {
  console.log('组件销毁，清理资源')
})
</script>

四、Vue 生命周期核心使用原则（避坑 + 最佳实践）

1. 数据请求：优先在created（无 DOM 依赖）或mounted（有 DOM 依赖）中调用，不要在beforeCreate中请求（无法访问this/ 响应式数据）；

2. DOM 操作：仅能在mounted和updated中执行（这两个阶段才有真实 DOM），created和beforeMount中操作 DOM 会报错；

3. 资源清理：必须在beforeDestroy（Vue2）/onBeforeUnmount（Vue3）中执行，如清除定时器、解绑addEventListener、销毁 echarts / 地图等第三方插件，防止内存泄漏；

4. updated中避免修改数据：直接在updated中修改响应式数据，会触发无限的更新循环（beforeUpdate→updated→beforeUpdate…）；

5. Vue3 setup注意：钩子必须在setup同步调用（不能在定时器、异步函数中调用），否则 Vue 无法检测。

总结

1. Vue2 核心：8 个钩子分 4 个阶段，执行顺序为「创建→挂载→更新→销毁」，created（请求数据）、mounted（操作 DOM）、beforeDestroy（清理资源）是最常用的三个；

2. Vue3 核心：兼容 Vue2 Options API，推荐 Composition API，setup替代beforeCreate/created，其他钩子需导入后使用，且无this；

3. 通用原则：DOM 操作等挂载后、资源清理等销毁前、数据请求避创建前，这三个原则能解决 90% 的生命周期使用问题。