理解vue组件的生命周期是高效开发的核心技能。每个组件都经历从诞生到消亡的过程，Vue在这些关键时刻提供了钩子函数，让我们精准介入操作。掌握这些钩子，你就能完全掌控组件行为。

一、生命周期是什么？简单比喻
想象组件像一个人：

• 出生前（创建阶段）

• 成年工作（挂载阶段）

• 状态变化（更新阶段）

• 退休离场（销毁阶段）

Vue在每段转换期都给我们留了"操作窗口"。

二、八大关键钩子函数实战解析

1. beforeCreate
   组件刚初始化，数据观测和事件配置都未完成
   使用场景：极少使用，此时无法访问data或methods

2. created ✅ 高频使用
   完成数据观测，可访问data和methods，但dom未生成
   典型操作：

   created() {
     this.loadUserData(); // 发起api请求
     this.initTimer();    // 初始化定时器
   }

3. beforeMount
   模板编译完成，虚拟DOM已创建，真实DOM还未替换

4. mounted ✅ 核心节点
   组件已挂载到真实DOM，可操作DOM元素
   重要提示：

   mounted() {
     this.$refs.searchInput.focus(); // 操作DOM元素
     this.initMap(); // 初始化第三方库（如地图）
   }

5. beforeUpdate
   数据变化导致重渲染前触发
   适用场景：获取更新前的DOM状态

6. updated
   虚拟DOM重新渲染后触发
   警告：避免在此修改状态，可能导致死循环！

7. beforeUnmount（Vue 3）/ beforeDestroy（Vue 2）
   组件销毁前调用
   关键任务：清理工作

   beforeUnmount() {
     clearInterval(this.timer); // 清除定时器
     this.chartInstance.dispose(); // 销毁ECharts实例
     window.removeEventListener('resize', this.handleResize); // 移除事件监听
   }

8. unmounted（Vue 3）/ destroyed（Vue 2）
   组件已销毁，所有绑定和监听被移除

三、避坑指南与性能建议

• 异步请求放created还是mounted？
  需要DOM操作放mounted，纯数据请求优先created（更早发起）

• 避免在updated中修改数据 → 用计算属性(computed)或侦听器(watch)替代

• 内存泄漏重灾区：务必在beforeUnmount中清除

  • 定时器

  • 全局事件监听

  • 第三方库实例

实际项目中，80%的需求集中在created、mounted和beforeUnmount三个钩子。重点掌握它们的使用时机能解决绝大多数开发问题。

四、生命周期示意图助记

创建阶段：beforeCreate → created  
挂载阶段：beforeMount → mounted  
更新阶段：beforeUpdate → updated  
销毁阶段：beforeUnmount → unmounted

总结：

生命周期钩子是Vue给开发者的控制开关。理解每个阶段的可用资源和限制，能让你在合适时机做正确操作——无论是初始化数据、操作DOM还是预防内存泄漏。多在实际项目中刻意练习，很快你就能凭直觉做出最佳选择。

链接: https://fly63.com/article/detial/12746