Vue3核心语法进阶（生命周期）
前言：上一篇我们已经讲解完了computed还有监听，今天我们讲解一下核心语法中的生命周期以及Hook
一、Vue3 生命周期详解：从“出生”到“退休”的一生
又来学习Vue3前端啦！今天咱们来聊聊 Vue3 里一个非常重要的概念——生命周期（Lifecycle）。如果你刚学 Vue，听到“生命周期”这个词可能会觉得有点高大上，甚至有点懵。别担心！今天我就用打比方的方式，带你彻底搞懂它！
什么是生命周期？
想象一下，一个人从出生、长大、工作、到退休，会经历不同的阶段。每个阶段都有对应的行为，比如小时候上学，长大了上班，老了退休。
Vue 组件也是一样！ 它从被创建出来，到挂载到页面上，再到数据更新，最后被销毁，也会经历一系列的“人生阶段”。这些阶段就叫做 生命周期钩子（Lifecycle Hooks）。
我们可以在这个过程中“插一脚”，在某个阶段执行我们想要的代码，比如：
- 组件一创建，就去服务器拿数据。
- 组件更新后，重新计算某个值。
- 组件要被销毁了，记得清理定时器，别让它“赖着不走”。
Vue3 生命周期的三大阶段
Vue3 的生命周期可以分为三个主要阶段：
- 创建阶段（出生）
- 更新阶段（成长）
- 销毁阶段（退休）
下面我们一个一个来拆解，用最简单的方式讲明白！
阶段一：创建阶段（组件的“出生”）
这个阶段是组件刚被创建的时候，就像一个新生儿。
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 准备，再挂载上岗，更新前准备，更新后总结，退休前告别，最后光荣下岗。”
| 钩子函数 | 时机 | 常见用途 |
|---|---|---|
setup() | 组件创建前 | 定义数据、方法、逻辑复用 |
onMounted() | 组件挂载到页面后 | 发请求、操作 DOM、启动定时器 |
onUpdated() | 组件更新后 | 更新后的 DOM 操作（慎用） |
onUnmounted() | 组件销毁后 | 清理定时器、事件监听 |
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 生命周期！如果觉得有用，欢迎点赞、收藏、转发，让更多小伙伴告别“生命周期恐惧症”！
