Vue3 生命周期钩子（完整指南）

Vue3 生命周期钩子：从入门到实战掌握组件的“生命节奏”

在使用 Vue 3 开发前端应用时，你是否曾好奇：一个组件从“出生”到“消失”，中间经历了哪些关键阶段？这些阶段是否可以被我们“感知”并执行特定逻辑？答案是肯定的。Vue 3 为我们提供了强大的生命周期钩子（Lifecycle Hooks），让你能精准控制组件在不同阶段的行为。

Vue3 生命周期钩子，就像组件的“心跳图谱”。它记录了组件从创建、挂载、更新到销毁的完整过程。掌握这些钩子，意味着你能像一位指挥家一样，精确安排每个阶段的“演奏”——比如在组件加载前预加载数据，或在组件卸载前清理定时器。

本文将带你一步步理解 Vue 3 的生命周期钩子，从基础概念到实战应用，结合真实代码示例，帮助你真正“听懂”组件的“心跳”。

组件的“生命旅程”：生命周期钩子的阶段概览

在 Vue 3 中，组件的生命周期可以分为几个关键阶段，每个阶段都有对应的钩子函数供你“插桩”执行逻辑。这些钩子函数在组件实例的生命周期中被自动调用，无需手动触发。

我们可以通过一个简单的比喻来理解：把组件比作一个“演员”，它从“试镜”（创建）开始，经历“彩排”（挂载）、“演出中”（更新）、“谢幕”（卸载）等阶段。而生命周期钩子，就是每个阶段的“提示音”——提醒你该做什么了。

Vue 3 的生命周期钩子主要分为以下 6 个核心阶段：

• onBeforeMount：组件挂载前，DOM 还未生成
• onMounted：组件挂载完成，DOM 已渲染
• onBeforeUpdate：组件更新前，数据变化但 DOM 未更新
• onUpdated：组件更新完成，DOM 已同步
• onBeforeUnmount：组件卸载前，清理工作准备开始
• onUnmounted：组件完全卸载，资源释放完成

这些钩子函数均来自 Vue 3 的 @vue/runtime-core 模块，使用时需要通过 import { onBeforeMount, onMounted } from 'vue' 导入。

创建阶段：onBeforeMount 与 onMounted

在组件创建初期，Vue 会先进行实例化，然后进入挂载阶段。此时，onBeforeMount 和 onMounted 是两个关键钩子。

onBeforeMount：挂载前的“最后检查”

这个钩子在组件挂载到 DOM 之前被调用。此时，组件的模板尚未渲染成真实 DOM，但数据和计算属性已经初始化完成。

import { onBeforeMount } from 'vue'

export default {
  setup() {
    // 在挂载前执行，适合做一些预处理
    onBeforeMount(() => {
      console.log('组件即将挂载到 DOM，但尚未渲染')
      // 例如：预加载配置、设置初始状态
    })

    return {}
  }
}

💡 举个例子：你有一个用户信息卡片组件，需要在挂载前从本地存储读取用户偏好设置。这时就可以把 localStorage.getItem 放在 onBeforeMount 中，确保数据在 DOM 渲染前就准备就绪。

onMounted：挂载完成的“确认信号”

当组件成功插入到页面 DOM 中后，onMounted 被触发。此时，你可以安全地操作 DOM、绑定事件、初始化第三方库（如地图、图表）等。

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('组件已成功挂载到页面，DOM 已渲染完成')
      // 常见用途：初始化图表、绑定 DOM 事件、获取焦点
      const el = document.getElementById('my-input')
      if (el) el.focus()
    })

    return {}
  }
}

⚠️ 注意：不要在 onMounted 中修改响应式数据导致重新渲染，除非你明确知道这样做的影响。

更新阶段：onBeforeUpdate 与 onUpdated

当组件的响应式数据发生变化时，Vue 会触发更新流程。onBeforeUpdate 和 onUpdated 两个钩子分别在更新前后执行。

onBeforeUpdate：更新前的“预演”

这个钩子在数据变化、Vue 开始重新渲染 DOM 之前调用。此时，组件的响应式数据已经更新，但 DOM 仍然保持旧状态。

import { ref, onBeforeUpdate } from 'vue'

export default {
  setup() {
    const count = ref(0)

    onBeforeUpdate(() => {
      console.log('数据已变化，即将重新渲染 DOM')
      // 可用于记录更新前的状态，比如性能监控
      console.log('更新前的 count 值:', count.value)
    })

    return {
      count
    }
  }
}

🎯 实用场景：在复杂列表中，你可以用 onBeforeUpdate 记录当前滚动位置，避免页面抖动。

onUpdated：更新后的“确认完成”

当 DOM 已根据新数据完成渲染后，onUpdated 被调用。此时你可以访问最新的 DOM 元素。

import { ref, onUpdated } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    onUpdated(() => {
      console.log('DOM 已更新，可以安全操作新 DOM 元素')
      // 例如：更新图表、滚动到最新消息
      const container = document.querySelector('.message-list')
      if (container) {
        container.scrollTop = container.scrollHeight
      }
    })

    return {
      message
    }
  }
}

✅ 小贴士：onUpdated 仅在组件自身数据更新时触发，不包括子组件更新。

卸载阶段：onBeforeUnmount 与 onUnmounted

当组件从页面中被移除时，Vue 会执行清理操作。这两个钩子是释放资源的“黄金窗口”。

onBeforeUnmount：卸载前的“收尾准备”

在组件被销毁前调用。此时，组件仍然可以访问数据和方法，但已无法渲染。

import { ref, onBeforeUnmount } from 'vue'

export default {
  setup() {
    const timer = setInterval(() => {
      console.log('定时器运行中...')
    }, 1000)

    onBeforeUnmount(() => {
      console.log('组件即将被销毁，清理定时器')
      clearInterval(timer) // 必须在此处清除，否则会造成内存泄漏
    })

    return {}
  }
}

📌 关键点：所有在 setup 中创建的定时器、事件监听器、WebSocket 连接等，都应在 onBeforeUnmount 中清理。

onUnmounted：卸载完成的“最终确认”

组件完全销毁后调用。此时，组件实例已不存在，无法再访问任何属性或方法。

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      console.log('组件已彻底卸载，资源释放完成')
      // 用于日志记录、清理全局状态等
    })

    return {}
  }
}

🧠 建议：onUnmounted 适合做“善后工作”，如发送埋点日志、清空全局变量等。

生命周期钩子对比表：快速查阅指南

实战案例：构建一个动态计数器组件

我们来用完整的生命周期钩子，实现一个带“动态加载”和“自动清理”的计数器组件。

import { ref, onMounted, onBeforeUnmount, onUpdated } from 'vue'

export default {
  setup() {
    const count = ref(0)
    let intervalId = null

    // 组件挂载后启动计数
    onMounted(() => {
      console.log('计数器已启动')
      intervalId = setInterval(() => {
        count.value++
      }, 1000)
    })

    // 更新后，可选：打印最新值
    onUpdated(() => {
      console.log('计数更新为:', count.value)
    })

    // 组件卸载前清理定时器
    onBeforeUnmount(() => {
      console.log('正在清理计数器资源')
      if (intervalId) {
        clearInterval(intervalId)
      }
    })

    // 暴露方法供模板调用
    const reset = () => {
      count.value = 0
    }

    return {
      count,
      reset
    }
  }
}

在模板中使用：

<div>
  <p>当前计数: {{ count }}</p>
  <button @click="reset">重置</button>
</div>

✅ 这个例子展示了生命周期钩子如何协同工作：挂载时启动定时器，更新时记录状态，卸载时清理资源，避免内存泄漏。

总结：掌握生命周期钩子，掌控组件命运

Vue3 生命周期钩子，是构建健壮、高效应用的核心工具。它们不是“可有可无”的装饰，而是组件生命周期中不可或缺的“控制节点”。

通过合理使用 onMounted 初始化资源，onBeforeUnmount 清理隐患，onUpdated 响应变化，你能让组件行为更可预测、性能更稳定。

记住：每一个钩子都是一个“机会窗口”。在正确的时间做正确的事，是专业开发者的标志。

无论你是初学者还是中级开发者，深入理解并熟练运用这些钩子，都将显著提升你的 Vue 3 实战能力。从今天开始，让你的每一个组件，都“活得”更优雅、更高效。