Vue3核心语法进阶（生命周期）

前言：上一篇我们已经讲解完了computed还有监听，今天我们讲解一下核心语法中的生命周期以及Hook

一、Vue3 生命周期详解：从“出生”到“退休”的一生

 又来学习Vue3前端啦！今天咱们来聊聊 Vue3 里一个非常重要的概念——生命周期（Lifecycle）。如果你刚学 Vue，听到“生命周期”这个词可能会觉得有点高大上，甚至有点懵。别担心！今天我就用打比方的方式，带你彻底搞懂它！

什么是生命周期？

想象一下，一个人从出生、长大、工作、到退休，会经历不同的阶段。每个阶段都有对应的行为，比如小时候上学，长大了上班，老了退休。

Vue 组件也是一样！ 它从被创建出来，到挂载到页面上，再到数据更新，最后被销毁，也会经历一系列的“人生阶段”。这些阶段就叫做 生命周期钩子（Lifecycle Hooks）。

我们可以在这个过程中“插一脚”，在某个阶段执行我们想要的代码，比如：

• 组件一创建，就去服务器拿数据。
• 组件更新后，重新计算某个值。
• 组件要被销毁了，记得清理定时器，别让它“赖着不走”。

Vue3 生命周期的三大阶段

Vue3 的生命周期可以分为三个主要阶段：

1. 创建阶段（出生）
2. 更新阶段（成长）
3. 销毁阶段（退休）

下面我们一个一个来拆解，用最简单的方式讲明白！

阶段一：创建阶段（组件的“出生”）

这个阶段是组件刚被创建的时候，就像一个新生儿。

1. setup() —— “产前准备”

注意：Vue3 推荐使用 setup() 函数，它替代了 Vue2 的 beforeCreate 和 created。

解释： setup() 是组件的“产前准备”。在组件真正创建之前，Vue 就会先执行 setup()。你可以在这里定义响应式数据、方法、监听器等等。

import { ref, onMounted } from 'vue'export default {setup() {const count = ref(0)const add = () => {count.value++}// 这里 return 的东西，模板里才能用return {count,add}}
}

注意：setup() 里不能用 this，因为它不是在组件实例上执行的。

2. onMounted() —— “正式上岗”

解释： 组件已经“出生”了，并且被放到页面上了（DOM 渲染完成），就像新员工第一天上班。

这时候，你就可以操作 DOM、发网络请求、启动定时器了。

import { onMounted } from 'vue'export default {setup() {onMounted(() => {console.log('组件已经挂载到页面了！')// 比如：请求用户数据fetchUserData()})return {}}
}

如果你想在组件加载时获取数据，onMounted 是最常见的选择。

阶段二：更新阶段（组件的“成长”）

当组件里的数据发生变化（比如点击按钮改变了某个值），组件会重新渲染。这个过程就是“更新”。

1. onUpdated() —— “变身后的小总结”

解释： 组件因为数据变化“变身”了，DOM 也重新渲染完了。这时候 onUpdated 就会被触发。

import { onUpdated } from 'vue'export default {setup() {onUpdated(() => {console.log('组件更新了！DOM 也重新画好了')})return {}}
}

在 onUpdated 里不要修改响应式数据，否则会无限循环更新！就像你每次变身后又说“我要变”，那就没完没了了。

阶段三：销毁阶段（组件的“退休”）

当组件被移除（比如切换页面、v-if 变 false），它就要“退休”了。

1. onUnmounted() —— “退休前的告别”

解释： 组件要被销毁了，这时候是清理“遗留问题”的最后机会！

比如你之前设置了定时器、监听了事件、打开了 WebSocket，现在都得关掉，不然就会造成内存泄漏（就像退休了还占着办公室不走）。

import { onMounted, onUnmounted } from 'vue'export default {setup() {let timer = nullonMounted(() => {timer = setInterval(() => {console.log('每秒执行一次')}, 1000)})onUnmounted(() => {// 退休了，记得关掉定时器！clearInterval(timer)console.log('定时器已清理，光荣退休')})return {}}
}

注意 ! ! !  凡是你“借的”，都要记得“还”！开的定时器要关，加的事件要解绑。

其他常用生命周期钩子（进阶补充）

onBeforeMount() —— “马上要上岗了，紧张！”

在组件挂载到 DOM 之前执行。一般用得不多，setup 基本能搞定。

onBeforeUpdate() —— “我马上要变身了”

在数据变化、DOM 更新之前触发。你可以在这里拿到更新前的 DOM 状态。

onBeforeUnmount() —— “我快要退休了，提前准备”

在组件销毁之前执行，适合做最后的清理确认。

2. onActivated 和 onDeactivated

这两个钩子与组件的激活状态有关，它们主要用于<keep-alive>缓存的组件。

• onActivated(hook: () => void)：当组件被激活时调用。在<keep-alive>中，当组件从缓存中被重新挂载到DOM时，会触发这个钩子。这可以用来执行一些需要在组件显示时运行的代码。

• onDeactivated(hook: () => void)：当组件被停用时调用。在<keep-alive>中，当组件被缓存，不再挂载到DOM时，会触发这个钩子。这可以用来执行一些清理工作，比如取消事件监听或定时器。

onBeforeUnmount和onUnmounted钩子会在组件卸载时被调用，而onActivated和onDeactivated钩子则与组件的激活状态有关，通常用于<keep-alive>缓存的组件。如果组件没有被卸载，那么onBeforeUnmount和onUnmounted钩子就不会被调用。 

Vue3 生命周期执行顺序（一句话记牢）

setup → onBeforeMount → onMounted → onBeforeUpdate → onUpdated → onBeforeUnmount → onUnmounted

你可以这样记：

“先 setup 准备，再挂载上岗，更新前准备，更新后总结，退休前告别，最后光荣下岗。”

Vue3 的生命周期就像组件的“人生剧本”，每个阶段都有它的使命。掌握好这些钩子，你就能在合适的时机做合适的事，写出更健壮、更高效的代码！

记住：该 setup 时就 setup，该清理时就清理，组件的一生，清爽又体面。

<script setup lang="ts" xmlns="http://www.w3.org/1999/html">import {onBeforeMount,onDeactivated, onUnmounted, onBeforeUnmount, onMounted, onUpdated, ref, onBeforeUpdate, onActivated} from "vue";console.log('ShengMing.vue')
let num = ref(0)
console.log(num)function add(){num.value = num.value + 1
}// 2. 挂载前和挂载后钩子
onBeforeMount(() => {console.log('ShengMing.vue onBeforeMount')
})onMounted(() => {console.log('ShengMing.vue onMounted')
})// 3.更新前和更新后钩子
onBeforeUpdate(() => {console.log('ShengMing.vue onBeforeUpdate')
})
onUpdated(() => {console.log('ShengMing.vue onUpdated')
})// 4.销毁前和销毁后钩子
onBeforeUnmount(() => {console.log('卸载之前')
})
onUnmounted(() => {console.log('卸载之后')
})onActivated(() => {console.log('组件被激活')
})
onDeactivated(() => {console.log('组件被停用')
})</script><template><div class="lifecylce"><div>数据：{{num}}</div><button @click="add">+</button></div></template><style scoped></style>

希望这篇生命周期的详细讲解能帮你彻底理解 Vue3 生命周期！如果觉得有用，欢迎点赞、收藏、转发，让更多小伙伴告别“生命周期恐惧症”！