Vue的生命周期有哪些及执行机制？

一、Vue 生命周期流程（Vue2）

Vue 生命周期主要分为 4个阶段：

阶段	生命周期钩子
创建阶段	beforeCreate → created
挂载阶段	beforeMount → mounted
更新阶段	beforeUpdate → updated
销毁阶段	beforeDestroy → destroyed

二、生命周期执行顺序

完整执行顺序如下：

复制代码

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

执行机制可以理解为：

复制代码

初始化
 ↓
创建实例
 ↓
挂载DOM
 ↓
数据更新
 ↓
组件销毁

三、各生命周期详解

1 beforeCreate（创建前）

特点

Vue实例刚创建
data、methods 还没初始化
不能访问 data

javascript 复制代码

beforeCreate() {
  console.log(this.data) // undefined
}

常见用途

基本不用。

2 created（创建完成）

特点

data、methods 已初始化
可以访问 data
DOM 还没生成

javascript 复制代码

created() {
  console.log(this.msg)
}

常见用途

请求接口
初始化数据
启动定时器

例如：

javascript 复制代码

created(){
  this.getList()
}

3 beforeMount（挂载前）

特点

模板编译完成
DOM 还没渲染到页面

一般很少使用。

4 mounted（挂载完成）

特点

DOM 已经生成
可以操作 DOM

javascript 复制代码

mounted() {
  console.log(this.$el)
}

常见用途

DOM操作
第三方库初始化

例如：

ECharts
Swiper

javascript 复制代码

mounted(){
  this.initChart()
}

5 beforeUpdate（更新前）

当 data 数据改变 时触发。

特点

数据更新
DOM 还没更新

6 updated（更新后）

DOM 更新完成。

javascript 复制代码

updated(){
 console.log("页面已更新")
}

注意：

不要在 updated 里修改 data，否则会死循环。

7 beforeDestroy（销毁前）

组件即将销毁。

常见用途

清除定时器
移除事件监听

javascript 复制代码

beforeDestroy(){
  clearInterval(this.timer)
}

8 destroyed（销毁后）

组件已经被销毁。

事件监听移除
子组件销毁
DOM移除

四、Vue 生命周期执行机制（核心原理）

Vue 生命周期的本质流程：

arduino 复制代码

new Vue()
   ↓
初始化生命周期
   ↓
初始化事件
   ↓
初始化数据
   ↓
created
   ↓
编译 template → render
   ↓
生成 Virtual DOM
   ↓
beforeMount
   ↓
渲染真实 DOM
   ↓
mounted
   ↓
数据变化
   ↓
Virtual DOM diff
   ↓
更新 DOM
   ↓
updated
   ↓
组件销毁
   ↓
beforeDestroy
   ↓
destroyed

这里涉及两个核心机制：

1 虚拟DOM（Virtual DOM）

Vue 使用 Virtual DOM diff 算法来更新页面，而不是直接操作 DOM，提高性能。

2 响应式系统

当 data 变化时：

kotlin 复制代码

data变化
 ↓
触发setter
 ↓
通知Watcher
 ↓
重新render
 ↓
更新DOM

五、Vue3 生命周期（对比）

在 Vue.js 中生命周期改为：

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

示例：

javascript 复制代码

import { onMounted } from "vue"

onMounted(()=>{
  console.log("组件已挂载")
})

六、面试高频总结（很重要）

面试常问：

1 生命周期顺序

复制代码

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

2 created 和 mounted 区别

created	mounted
DOM未生成	DOM已生成
可以请求接口	可以操作DOM

3 哪个生命周期请求接口？

一般在 created 或 mounted。