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

在Vue.js中，**生命周期（Lifecycle）**指的是：
一个 Vue 组件从创建 → 挂载 → 更新 → 销毁的整个过程。在这些阶段，Vue 会自动调用对应的生命周期钩子函数（Lifecycle Hooks），开发者可以在这些函数中执行逻辑，比如请求数据、操作 DOM 等。

Vue 不同版本生命周期略有区别，最常见的是Vue2和Vue3。先以Vue2为主说明执行机制。

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

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

二、生命周期执行顺序

完整执行顺序如下：

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中生命周期改为：

示例：

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

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

面试常问：

1 生命周期顺序

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed

2 created 和 mounted 区别

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

一般在created 或 mounted。