幕雪

vue生命周期从创建到销毁：详解生命周期钩子及其应用

组件的生命旅程：什么是Vue生命周期钩子？

每一个Vue组件实例从被创建、挂载到页面、数据更新，直到最终被销毁移除，都会经历一系列预设的阶段。这些阶段就像是一个组件的“生命旅程”。Vue生命周期钩子（Lifecycle Hooks）正是Vue框架在这个生命旅程中的一个个关键“检查点”或“驿站”。

简单来说，它们是开发者可以注册的函数，Vue会在组件生命周期的特定时刻自动调用这些函数。这提供了一个在组件不同阶段执行自定义逻辑的强大机制。

为什么要理解和使用生命周期钩子？

理解和正确使用生命周期钩子对于构建响应式、高效且无内存泄漏的Vue应用至关重要。它的核心价值在于提供精确的代码执行时机。

为什么不能只是把所有逻辑写在一起？

  • 时机依赖：很多操作依赖于组件所处的状态。例如，访问组件的DOM元素必须在元素被渲染到页面之后；发起获取数据的网络请求通常应该在组件数据初始化之后进行。钩子确保你的代码在正确的时刻执行。
  • 资源管理：组件可能会创建一些需要手动清理的资源，比如定时器、事件监听器、打开的WebSocket连接等。如果在组件销毁时不进行清理，就可能导致内存泄漏或不必要的后台活动。销毁阶段的钩子就是用来做这些清理工作的。
  • 逻辑分离与组织：将不同职责的代码（如数据初始化、DOM操作、资源清理）分散到不同的生命周期钩子中，可以使组件代码结构更清晰、更易于理解和维护。

Vue组件的生命周期流程与钩子一览：有多少个钩子？在何处执行？

Vue组件的生命周期大致分为四个主要阶段：创建、挂载、更新和销毁。每个阶段都提供了一个或多个钩子函数。

以下是主要的生命周期钩子及其在Options API中的名称（Vue 3 的 Composition API 使用方式略有不同，下文会介绍）：

1. 创建阶段 (Creation)

这是组件实例被创建之初。

beforeCreate

时机：在实例完全初始化之前调用。组件的选项（Options）已经被解析，但数据 (data)、计算属性 (computed)、方法 (methods) 和事件 (events) 都尚未初始化。

可访问：此时无法访问到 this.data、this.props 或 this.$el 等实例上的属性。

用途：这是组件生命周期中最早的钩子，用处相对较少。可以在这里进行一些实例化之前的处理，比如非响应式变量的声明。

created

时机：实例已经被创建，数据 (data)、方法 (methods)、计算属性 (computed) 和侦听器 (watch) 都已初始化完成。组件的响应式系统已经建立。

可访问：可以完全访问到 this.data、this.props、this.methods 等。但此时组件还没有被挂载到DOM，无法访问 this.$el。

用途：这是发起异步请求获取数据的常用时机，因为数据已经初始化，可以在数据返回后直接更新data属性，从而触发后续的模板渲染。也可以在这里执行一些不依赖于DOM的初始化操作。

注意：在服务器端渲染 (SSR) 中，只有 beforeCreate 和 created 这两个钩子会被调用。因此，为了确保SSR应用能正确获取到初始化数据，通常会将数据获取逻辑放在 created 中。

2. 挂载阶段 (Mounting)

这个阶段涉及组件模板的编译和渲染，并将组件挂载到页面上的特定DOM元素。

beforeMount

时机：在挂载 (mount) 开始之前调用。相关的 render 函数首次被调用，即将生成虚拟DOM。

可访问：此时模板已经编译或获取到渲染函数，但尚未创建真实的DOM节点，更没有挂载到页面上。this.$el 此时还只是一个虚拟的挂载点，尚未替换为真实的组件DOM。

用途：在首次渲染之前，可以进行一些最后的准备工作。但因为它紧挨着渲染，不适合在这里进行会触发额外渲染的操作。

mounted

时机：组件已经被挂载到DOM上，并且所有子组件也都已经挂载完成。

可访问：可以完全访问到渲染后的DOM元素，即 this.$el。此时组件在页面上是可见的。

用途：这是执行依赖于DOM的操作的最佳时机，例如：

  • 集成或初始化第三方DOM库，如图表库、编辑器、滚动条插件等。
  • 获取DOM元素的尺寸、位置或进行其他直接的DOM操作。
  • 手动添加事件监听器到DOM元素（虽然Vue推荐使用模板绑定）。

注意：mounted 钩子在正常的组件生命周期中只会在组件首次渲染到DOM时执行一次（除非组件被销毁后又重新创建）。

3. 更新阶段 (Updating)

当组件的响应式数据发生变化，并因此触发组件重新渲染时，会进入更新阶段。

beforeUpdate

时机：在数据更新后，虚拟DOM重新渲染和打补丁之前调用。

可访问：此时组件的数据已经更新到最新状态，但DOM尚未同步更新。你可以访问到更新前的DOM状态。

用途：可以在这里访问更新前的DOM状态，例如获取一个输入框在用户输入前的选中范围或滚动位置。也可以在这里进行一些在DOM更新前的准备，但应避免在这里修改数据，那可能导致不必要的循环更新。

updated

时机：在虚拟DOM重新渲染和打补丁之后，即组件的DOM已经根据最新的数据同步更新完毕后调用。

可访问：此时数据是最新的，并且页面上的DOM也已经是最新的。

用途：执行依赖于更新后DOM的操作，例如：

  • 根据最新的数据重新初始化或更新依赖DOM尺寸/结构的第三方库实例。
  • 执行依赖于DOM更新后尺寸或位置的计算。

注意：避免在 updated 钩子中直接或间接修改响应式数据，这可能会导致无限循环的更新过程。如果需要响应数据变化执行副作用，并且该副作用可能触发进一步的数据变化，通常更推荐使用 watch 选项。

4. 销毁阶段 (Destruction)

当组件从页面上移除，例如通过条件渲染 v-if 控制隐藏或路由切换离开时，会进入销毁阶段。

beforeUnmount (Vue 3) / beforeDestroy (Vue 2)

时机：在组件实例被完全销毁之前调用。此时组件仍然完全可用，它的数据、方法、计算属性等都可以正常访问。

用途：这是执行清理工作的阶段，极其重要，目的是释放组件占用的资源，避免内存泄漏。常见的清理操作包括：

  • 清除使用 setTimeout 或 setInterval 创建的定时器。
  • 移除使用 addEventListener 或第三方库添加的全局或DOM事件监听器。
  • 取消正在进行中的网络请求或WebSocket连接。
  • 移除可能由组件创建的、需要手动清理的全局资源。

unmounted (Vue 3) / destroyed (Vue 2)

时机：组件实例已经被完全销毁，并且其相关的DOM元素也已从页面中完全移除。

可访问：此时组件实例的所有东西都应该已经被解除绑定，并且无法访问。数据、方法、DOM等都已不可用。

用途：这个钩子是组件生命周期的终点。在此钩子中，你基本上只能确认组件已经被销毁，通常不会在这里执行太多逻辑，因为资源清理应该在 beforeUnmount/beforeDestroy 中完成。

Composition API (Vue 3) 中的生命周期钩子：如何使用？

在 Vue 3 的 Composition API 中，生命周期钩子不再是组件选项中的方法，而是需要从 vue 包中导入并作为函数在 setup 函数内部调用。这些函数都遵循 onXxx 的命名约定。

对应的 Composition API 钩子函数如下：

  • onBeforeMount (对应 Options API 的 beforeMount)
  • onMounted (对应 Options API 的 mounted)
  • onBeforeUpdate (对应 Options API 的 beforeUpdate)
  • onUpdated (对应 Options API 的 updated)
  • onBeforeUnmount (对应 Options API 的 beforeUnmount)
  • onUnmounted (对应 Options API 的 unmounted)

此外，Composition API 也提供了对应于 Options API 中其他特定用途钩子的函数：

  • onActivated (对应 Options API 的 activated)
  • onDeactivated (对应 Options API 的 deactivated)
  • onErrorCaptured (对应 Options API 的 errorCaptured)

在 Composition API 中使用这些钩子非常直观，只需要在 setup 函数中导入并调用它们，传入一个回调函数即可：

<script setup>
import { onMounted, ref } from 'vue'

const count = ref(0)

// 在组件挂载后执行
onMounted(() => {
  console.log('组件挂载完成，可以在这里操作DOM了！')
  // 例如: 初始化一个依赖DOM的库
})

// 在组件销毁前执行清理
onBeforeUnmount(() => {
  console.log('组件即将销毁，清理资源...')
  // 例如: 清除定时器、移除事件监听
})

</script>

<template>
  <div>{{ count }}</div>
</template>

注意，除了 setup 函数本身（它在 Options API 的 beforeCreate 和 created 之间执行），所有带 on 前缀的生命周期钩子函数必须在 setup 函数同步执行期间调用。在异步回调中调用它们将无法正确注册钩子。

其他生命周期相关的场景和钩子：KeepAlive 和 错误捕获

除了标准的创建、挂载、更新、销毁流程，Vue还提供了处理特殊场景的钩子：

activated / onActivated

时机：当组件作为 <KeepAlive> 的子组件被激活时调用。<KeepAlive> 会缓存非活动的组件实例，而不是销毁它们。当被缓存的组件重新显示时，会触发 activated 钩子。

用途：可以在组件从缓存中激活时重新获取数据、重置状态或重新绑定事件。

deactivated / onDeactivated

时机：当组件作为 <KeepAlive> 的子组件被停用时调用。在组件被移除但被缓存之前。

用途：可以在组件被停用时暂停一些活动（如动画、轮询），保存当前状态。

errorCaptured / onErrorCaptured

时机：当捕获到一个来自子孙组件的错误时调用。这个钩子可以接收错误对象、发生错误的组件实例以及错误来源信息。

用途：可以用来集中处理应用中的错误，例如记录错误日志、显示错误提示或进行优雅降级处理。返回 false 可以阻止错误继续向上冒泡。

renderTracked (Vue 3) 和 renderTriggered (Vue 3)

这两个是用于高级调试的钩子。renderTracked 会在组件渲染过程中追踪到响应式依赖时调用，renderTriggered 会在响应式依赖导致组件重新渲染时调用。它们提供了关于组件如何追踪和触发更新的详细信息，对于理解和调试响应性问题非常有帮助。

如何使用生命周期钩子：最佳实践和注意事项

正确使用生命周期钩子可以避免许多问题：

  • 数据获取：通常放在 created (Options API) 或在 setup 中异步调用 (Composition API)，因为此时数据已响应式，且不依赖DOM。如果数据获取需要等待DOM渲染完成，可以考虑放在 mounted。
  • DOM操作：严格放在 mounted (首次渲染) 或 updated (后续更新)，因为这些钩子保证了组件的DOM已经存在并处于最新状态。
  • 资源清理：务必在 beforeUnmount/beforeDestroy 中进行，这是防止内存泄漏的关键步骤。包括定时器、全局事件监听、第三方库创建的实例等。
  • 避免无限循环：不要在 beforeUpdate 或 updated 中直接修改响应式数据，除非你非常清楚其逻辑且有明确的终止条件。对于需要响应数据变化并执行副作用的场景，使用 watch 通常是更好的选择。
  • SSR限制：如果在构建同构应用（服务端渲染），请记住只有 beforeCreate 和 created 会在服务器端执行。依赖DOM的钩子（如 mounted, updated）只会在客户端执行。
  • Composition API 调用位置：onMounted 等函数必须在 setup 的同步作用域内调用。

总结

Vue生命周期钩子是Vue框架核心机制的重要组成部分，它们为开发者提供了一系列精准的“切入点”，以便在组件从诞生到消亡的整个过程中执行特定的逻辑。理解每个钩子的执行时机、可访问状态以及典型用途，是编写高效、稳定且易于维护的Vue应用的基础。

通过合理地在不同钩子中组织代码，我们可以确保数据在需要时被加载、DOM操作在可能时进行、资源在不再需要时被释放，从而构建出更健壮的应用。掌握组件的生命周期，就是掌握了Vue应用中代码执行的“节奏”。

vue生命周期