一、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
beforeCreate() {
console.log(this.data) // undefined
}
常见用途
基本不用。
2 created（创建完成）
特点
- data、methods 已初始化
- 可以访问 data
- DOM 还没生成
created() {
console.log(this.msg)
}
常见用途
- 请求接口
- 初始化数据
- 启动定时器
例如：
created(){
this.getList()
}
3 beforeMount（挂载前）
特点
- 模板编译完成
- DOM 还没渲染到页面
一般很少使用。
4 mounted（挂载完成）
特点
- DOM 已经生成
- 可以操作 DOM
mounted() {
console.log(this.$el)
}
常见用途
- DOM操作
- 第三方库初始化
例如：
- ECharts
- Swiper
mounted(){
this.initChart()
}
5 beforeUpdate（更新前）
当 data 数据改变 时触发。
特点
- 数据更新
- DOM 还没更新
6 updated（更新后）
DOM 更新完成。
updated(){
console.log("页面已更新")
}
注意：
不要在 updated 里修改 data，否则会死循环。
7 beforeDestroy（销毁前）
组件即将销毁。
常见用途
- 清除定时器
- 移除事件监听
beforeDestroy(){
clearInterval(this.timer)
}
8 destroyed（销毁后）
组件已经被销毁。
- 事件监听移除
- 子组件销毁
- DOM移除
四、Vue 生命周期执行机制（核心原理）
Vue 生命周期的本质流程：
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 变化时：
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 |
示例：
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。
