Vue组件的一生：从“出生”到“退休”全知道！

🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河 ！

欢迎来到 晷龙烬的博客小窝✨！ 这里记录技术学习点滴，分享实用技巧，偶尔聊聊奇思妙想～

原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！ 欢迎在评论区交流🌟！

引言

嗨，朋友们！今天咱们不聊高深的理论，就唠唠Vue组件那点事儿。你有没有好奇过，一个Vue组件从被创建、显示在页面上、再到数据更新、最后被移除，这一生都经历了什么？这就是生命周期。

理解它，你就能在“对的时间做对的事”，比如该什么时候去后台拿数据、什么时候才能操作DOM、组件“走”了以后怎么帮它收拾“遗物”（防止内存泄漏）。这篇文章，我就用最直白的话，带你走一遍Vue组件的一生。

一、准备阶段：出生前的准备

这个阶段，组件还在“妈妈肚子里”，没有真实的DOM结构，主要是处理数据和逻辑。

Vue2的写法：

• beforeCreate：这时候连data和methods都还没准备好，this访问不到它们，所以这个钩子几乎用不上。

• created：这是你第一个能大展拳脚的地方！此时，data、methods、computed都初始化好了，你可以通过this随意调用。但是，DOM还没渲染呢。所以，这里最适合干些不依赖DOM的活儿：

  • 发请求去后台拿初始数据。
  • 初始化一些响应式数据。
  • 初始化一些不依赖DOM的第三方SDK。
  • 绑定一些全局的事件监听。

Vue3的Composition API写法：

• 它用setup()函数替代了上面两个钩子。而且，setup()里没有this!

  • 你在setup()里用ref、reactive声明数据。
  • 发请求、初始化数据这些事，直接在setup()里做就行，作用和Vue2的created一样。
  • 可以通过setup(props, context)的参数来访问emit、attrs等。

二、挂载阶段：初次亮相

这个阶段，Vue把虚拟DOM变成真实的DOM，并插到页面里。操作DOM的核心时机就在这里！

Vue2的写法：

• beforeMount：DOM还是虚拟的，this.$el还拿不到真实节点。你可以在这里做渲染前的最后调整，比如根据路由参数改一下data。

• mounted：DOM已经真实挂载好了！ this.$el就是那个真实的DOM元素。这里是你操作DOM、初始化依赖DOM的插件的最佳时机：

  • 初始化ECharts图表、Swiper轮播图。
  • 获取DOM元素的尺寸、位置。
  • 执行一些依赖DOM的动画。

Vue3的Composition API写法：

• onBeforeMount：和Vue2的beforeMount类似。
• onMounted：和Vue2的mounted作用完全一样。不过你获取DOM是通过ref：先在setup里const chartDom = ref(null)，然后在模板里绑定，到这里就能用chartDom.value访问真实DOM了。

三、更新阶段：成长与变化

当组件的数据（data、props等）发生变化时，就会触发这个阶段。Vue会重新渲染视图。这里有个大忌：不要在这个阶段里修改响应式数据，否则容易导致无限循环更新！

Vue2的写法：

• beforeUpdate：数据已经变了，但DOM还没更新。 你可以抓住更新前的瞬间，干点啥：

  • 记录更新前的滚动条位置（防止DOM更新后页面“跳”一下）。
  • 暂停正在进行的动画或定时器，等更新完再恢复，避免错乱。

• updated：DOM已经更新完成了。 你可以在这里做收尾工作：

  • 把之前记录的滚动条位置给设回去。
  • 重新计算图表大小（比如ECharts调用resize()）。

Vue3的Composition API写法：

• onBeforeUpdate 和 onUpdated：逻辑和Vue2完全对应，只是通过ref来访问DOM。

四、卸载阶段：优雅退休

组件被切换或者移除时，就进入这个阶段。这里最重要的事就是“打扫卫生”，清理掉组件产生的所有“副作用”，防止内存泄漏。

Vue2的写法：

• beforeDestroy (或 beforeUnmount)：组件还在，DOM也还在，但马上就要被销毁了。这是你清理的黄金时间：

  • 清除定时器（clearInterval/clearTimeout）。
  • 移除事件监听（$off 或 removeEventListener）。
  • 取消还没完成的网络请求（比如用Axios的CancelToken）。
  • 销毁第三方插件实例（比如 myChart.dispose()）。
  • 清理在全局对象（如window）上挂载的东西。

• destroyed (或 unmounted)：组件和DOM都已经销毁了。 这里一般做个兜底检查，大部分清理工作应该在beforeDestroy里做完。

Vue3的Composition API写法： 这里有个关键点：因为setup里没有this，所以像定时器ID、插件实例这些“副作用”的引用，你必须在setup里用普通变量先存起来，才能在卸载钩子里找到并清理它们。

• onBeforeUnmount：清理你之前保存的定时器、请求、插件实例。
• onUnmounted：组件已完全卸载，做最终检查。

五、注意

1. Vue2 所有钩子中 this 均指向组件实例（VM） 。
2. Vue3用Options API 写法时，this指向和钩子命名 都和 Vue2一样。仅 beforeDestroy/destroyed 可替换为 beforeUnmount/unmounted（两种命名都兼容）；
3. Vue3用 Composition API 写法时，没有 this，setup 替代初始化钩子，DOM 用 ref.value 访问，清理副作用需提前存引用。

结语

好啦，Vue组件这“一生”的几个重要阶段，咱们就聊完了。是不是感觉清晰多了？其实没那么复杂，你就把它想象成一个人的出生、成长、变化和离开，在每个阶段做好该做的事就行。

记住几个关键点：created里准备数据，mounted里操作DOM，beforeDestroy/onBeforeUnmount里坚决做好清理。理解了这些，你写出的组件就会更健壮、更高效。

---

—— 完 ——

✨ 至此结束 ✨

💡 点赞关注，解锁更多技术干货！

我是 晷龙烬 期待与你的下次相遇～