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 = null

    onMounted(() => {
      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 生命周期！如果觉得有用，欢迎点赞、收藏、转发，让更多小伙伴告别"生命周期恐惧症"！