vue 生命周期（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在前端开发中，Vue.js 以其声明式语法和响应式数据绑定机制广受欢迎。然而，许多开发者在使用 Vue 时，容易忽略其核心特性之一：Vue 生命周期。理解生命周期是掌握 Vue 开发的关键，它决定了组件在不同阶段的行为模式，例如数据初始化、DOM 操作、事件监听等。本文将通过生活化的比喻、代码示例和实际案例，系统性地解析 Vue 生命周期的各个阶段，并帮助读者在实际开发中合理利用这些钩子函数优化代码逻辑。

什么是 Vue 生命周期？

Vue 生命周期可以类比为“组件的从出生到消亡的过程”。每个 Vue 组件在创建、渲染、更新和销毁的过程中，会依次触发一系列内置的钩子函数（Lifecycle Hooks）。开发者可以通过这些钩子函数，在特定阶段执行自定义逻辑，例如：

• 初始化数据：在组件创建时加载初始值。
• 操作 DOM：在组件挂载后安全地访问 DOM 元素。
• 清理资源：在组件销毁前释放内存或关闭定时器。

通过控制生命周期，开发者可以更精细地管理组件行为，避免因操作时机错误导致的性能问题或逻辑冲突。

Vue 生命周期的核心阶段解析

Vue 的生命周期分为8个主要阶段，按照执行顺序依次为：
| 阶段 | 对应钩子函数 | 描述 |
|------|------------|------|
| 创建前 | beforeCreate | 组件实例初始化前，数据和方法尚未创建。 |
| 创建后 | created | 组件实例创建完成，数据观测和事件配置已生效。 |
| 挂载前 | beforeMount | 虚拟 DOM 生成，但尚未渲染到真实 DOM。 |
| 挂载后 | mounted | 组件已渲染到真实 DOM，可操作 DOM 元素。 |
| 更新前 | beforeUpdate | 数据变化触发更新前，旧 DOM 还未变化。 |
| 更新后 | updated | DOM 已更新，可访问更新后的 DOM。 |
| 销毁前 | beforeDestroy（Vue 2）/ beforeUnmount（Vue 3） | 组件销毁前，可执行清理操作。 |
| 销毁后 | destroyed（Vue 2）/ unmounted（Vue 3） | 组件已完全销毁，无法恢复。 |

以下将逐一解析这些阶段，并通过代码示例说明其应用场景。

1. 创建阶段：beforeCreate 和 created

beforeCreate 是组件生命周期的第一个钩子，此时：

• 数据对象（data）和方法（methods）尚未初始化。
• 无法通过 this 访问组件属性。

created 钩子在 beforeCreate 之后触发，此时：

• 组件实例已创建，数据和方法可被访问。
• 可以执行异步操作（如初始化数据），但此时 DOM 尚未生成。

示例代码：

new Vue({  
  data() {  
    return {  
      message: "Hello Vue!"  
    };  
  },  
  beforeCreate() {  
    console.log("beforeCreate: data未初始化", this.message); // 输出 undefined  
  },  
  created() {  
    console.log("created: data已初始化", this.message); // 输出 Hello Vue!  
    // 此时可发起网络请求  
  }  
});  

比喻：
beforeCreate 相当于“婴儿出生前”，身体器官尚未形成；而 created 则是“婴儿出生后”，具备基本生理机能，但还未与外界交互。

2. 挂载阶段：beforeMount 和 mounted

beforeMount 钩子在虚拟 DOM 生成后触发，此时：

• 模板已编译为虚拟节点（VNode），但未渲染到真实 DOM。

mounted 是组件挂载到真实 DOM 后的首个钩子，此时：

• 可安全操作 DOM 元素，例如初始化第三方库（如图表插件）。

示例代码：

new Vue({  
  template: "<div id='example'>挂载测试</div>",  
  beforeMount() {  
    console.log(document.getElementById("example")); // 输出 null（未渲染）  
  },  
  mounted() {  
    console.log(document.getElementById("example")); // 输出真实 DOM 节点  
    // 此时可调用 document.getElementById 进行操作  
  }  
}).$mount("#app");  

比喻：
beforeMount 类似于“建筑师画完设计图但未动工”，而 mounted 则是“建筑竣工后可以正式入住”。

3. 更新阶段：beforeUpdate 和 updated

当组件数据变化（如用户输入、API 响应）时，Vue 会触发更新流程。

• beforeUpdate：在虚拟 DOM 更新前触发，此时旧数据仍有效。
• updated：在 DOM 更新完成后触发，此时可获取最新的 DOM 状态。

示例代码：

new Vue({  
  data: { count: 0 },  
  template: "<button @click='count++'>点击计数：{{ count }}</button>",  
  beforeUpdate() {  
    console.log("beforeUpdate: 旧值", this.count); // 输出当前值  
  },  
  updated() {  
    console.log("updated: 新值", this.count); // 输出更新后的值  
    // 此时可操作 DOM 反馈视觉变化  
  }  
});  

注意事项：
避免在 updated 中直接修改 data，这会导致无限循环（因为修改数据会再次触发更新）。

4. 销毁阶段：beforeDestroy 和 destroyed

beforeDestroy（Vue 2）/ beforeUnmount（Vue 3）：在组件销毁前触发，此时仍可操作组件实例。
destroyed（Vue 2）/ unmounted（Vue 3）：组件已完全销毁，无法恢复。

示例代码：

new Vue({  
  data: { timer: null },  
  beforeDestroy() {  
    if (this.timer) {  
      clearInterval(this.timer); // 清除定时器，避免内存泄漏  
    }  
  }  
}).$mount("#app");  

比喻：
beforeDestroy 相当于“关闭电器前拔掉电源”，而 destroyed 是“电器已完全断电”。

实际案例：生命周期在项目中的应用

案例 1：在 mounted 中初始化第三方库

假设需要在组件中集成一个图表库（如 Chart.js），代码如下：

export default {  
  mounted() {  
    const ctx = this.$refs.chartCanvas.getContext("2d");  
    new Chart(ctx, {  
      type: "line",  
      data: { labels: ["Jan", "Feb"], datasets: [...] }  
    });  
  },  
  updated() {  
    // 图表数据变化时，需重新渲染图表  
  }  
};  

案例 2：在 beforeDestroy 中清理资源

若组件使用了定时器或 WebSocket，需在销毁前清理资源：

export default {  
  data() {  
    return { intervalId: null };  
  },  
  mounted() {  
    this.intervalId = setInterval(() => { /* 执行逻辑 */ }, 1000);  
  },  
  beforeDestroy() {  
    clearInterval(this.intervalId); // 防止内存泄漏  
  }  
};  

生命周期的常见误区与解决方案

误区 1：在 created 中操作 DOM

由于 created 阶段 DOM 尚未生成，此时操作 DOM 会失败。应改用 mounted 钩子。

误区 2：直接在 updated 中修改响应式数据

这会导致无限更新循环。若需根据数据变化执行逻辑，可使用计算属性或 watch 监听特定数据。

误区 3：忽略 Vue 2 和 Vue 3 的钩子命名差异

Vue 3 将 destroyed 和 beforeDestroy 分别改为 unmounted 和 beforeUnmount，需根据项目版本选择钩子名称。

结论

Vue 生命周期是组件行为的“时间轴”，掌握其阶段特性可显著提升开发效率与代码质量。通过合理利用钩子函数，开发者可以：

1. 在组件创建时初始化状态，避免冗余操作。
2. 在挂载后安全操作 DOM，减少兼容性问题。
3. 在销毁前清理资源，确保应用性能。

理解生命周期的本质，如同掌握了组件的“呼吸节奏”，让 Vue 开发从“能用”走向“优雅”。

关键词布局示例（隐含在上下文中）：

• Vue 生命周期的钩子函数是组件开发的核心工具
• 掌握 Vue 生命周期的阶段特性
• 在 Vue 生命周期中合理执行 DOM 操作
• Vue 生命周期钩子在实际项目中的应用

（全文共计约 1800 字）