组件管理 渲染流程 vue 的生命周期—vue 的生命周期钩子详解

🎢 Vue 的生命周期钩子详解：从出生到退休的奇幻之旅

🌟 场景引入：组件的一生

想象你是一位 Vue 组件的"人生导师"👩🏫，一位新组件 MyComponent 来向你咨询："我从创建到消失会经历什么？哪些关键时刻需要我主动参与？"

你微微一笑,掏出一张生命周期地图🗺️："从挂载到更新再到销毁，每个阶段都有专属'钩子'（Hook）等你触发，就像人生中的毕业典礼🎓、婚礼💍、退休派对🎉……"

📦 组件管理：生命周期的三个阶段

Vue 组件的生命周期分为三大阶段：

1. 创建（Creation）：出生证明、户口登记 🏠
2. 更新（Update）：成长变化、适应环境 🔄
3. 销毁（Destruction）：优雅退场、清理遗产 �

每个阶段都有对应的生命周期钩子函数，让你在关键时刻插入自定义逻辑。

🎬 渲染流程与钩子执行顺序

创建阶段（挂载到 DOM）

export default {  
  beforeCreate() { /* 组件胚胎期：data/methods 还未生成 */ },  
  created() { /* 组件出生：可访问 data，但还未挂载到 DOM */ },  
  beforeMount() { /* 挂载前夜：模板编译完成，但未替换 DOM */ },  
  mounted() { /* 正式上岗：DOM 已渲染，可操作 DOM 元素 */ }  
}  

💡 经典场景：

• created：初始化 API 数据请求 📡
• mounted：操作 DOM 或集成第三方库（如地图插件🗺️）

更新阶段（数据变化时）

export default {  
  beforeUpdate() { /* 数据变化，但 DOM 未重新渲染 */ },  
  updated() { /* DOM 已更新，小心无限循环！ */ }  
}  

⚠️ 警告：
在 updated 中修改数据可能触发递归更新！推荐用 watch 或 nextTick 代替。

销毁阶段（组件卸载）

export default {  
  beforeUnmount() { /* 临终关怀：清理定时器、事件监听 */ },  
  unmounted() { /* 组件已从 DOM 移除 */ }  
}  

🔧 必做事项：

• 清除 setInterval ⏱️
• 解绑全局事件 window.removeEventListener 🎧

🧩 特殊钩子：keep-alive 专属

被 <keep-alive> 缓存的组件会多两个钩子：

export default {  
  activated() { /* 从缓存中复活 */ },  
  deactivated() { /* 进入后台休眠 */ }  
}  

🌰 例子：

• activated：恢复滚动位置 📜
• deactivated：暂停视频播放 ▶️

🏆 最佳实践清单

1. 异步请求：优先用 created 而非 mounted（更早发起请求）
2. DOM 操作：必须在 mounted 之后
3. 内存泄漏：在 beforeUnmount 清理副作用
4. 性能优化：避免在 updated 执行重操作

� 知识彩蛋：Vue 3 变化

• beforeDestroy → beforeUnmount
• destroyed → unmounted
• 新增 renderTracked / renderTriggered（调试用）

生命周期速查表

你可以自信地告诉 MyComponent："你的每个重要时刻，都有对应的钩子保驾护航！" 🚀
基于 Vue 3 版本，最后更新于 2025 年 7 月）