组件生命周期

组件生命周期简介

当组件创建时，Vue 会经历一系列初始化步骤——设置数据观测、编译模板、将实例挂载到 DOM，以及在数据更改时进行更新。Vue 提供了生命周期钩子函数，允许在特定阶段执行代码。

来源：packages/runtime-core/src/component.ts516-568 packages/runtime-core/src/index.ts47-60

生命周期钩子概述

下方图表展示了 Vue 中所有可用的生命周期钩子

来源：packages/runtime-core/src/component.ts510-568 packages/runtime-core/src/componentOptions.ts419-435

组件初始化过程

组件初始化时，Vue 会经历几个步骤来设置组件实例

来源：packages/runtime-core/src/component.ts604-706 packages/runtime-core/src/component.ts799-917 packages/runtime-core/src/component.ts983-1085 packages/runtime-core/src/componentOptions.ts518-563

组件实例创建

组件实例通过 createComponentInstance() 函数创建。它会创建一个对象，其中包含所有必需的属性，如 props、data、computed properties 和生命周期钩子数组。

来源：packages/runtime-core/src/component.ts604-706 packages/runtime-core/src/component.ts510-568

组件设置

组件设置发生在 setupComponent() 中，它会初始化 props 和 slots，然后处理 setup 函数（对于 Composition API）或选项（对于 Options API）。

在数据、计算属性、方法或侦听器初始化之前，会调用 beforeCreate 钩子。在这些都设置好之后，会调用 created 钩子。

来源：packages/runtime-core/src/component.ts799-917 packages/runtime-core/src/componentOptions.ts518-563

挂载阶段

挂载阶段发生在组件被插入 DOM 时

来源：packages/runtime-core/src/renderer.ts270-278

渲染过程

Vue 使用 ReactiveEffect 来追踪组件依赖关系，并在响应式状态更改时触发重新渲染。这在 setupRenderEffect() 中设置。

首次渲染之前，会调用 beforeMount 钩子。DOM 创建并插入后，会调用 mounted 钩子。

来源：packages/runtime-core/src/renderer.ts270-278

更新周期

当组件使用的响应式状态发生变化时，组件会重新渲染

来源：packages/runtime-core/src/renderer.ts270-278

在更新 DOM 之前，会调用 beforeUpdate 钩子。DOM 更新后，会调用 updated 钩子。

卸载阶段

当组件从 DOM 中移除时

来源：packages/runtime-core/src/renderer.ts234-240

在组件即将被移除之前，会调用 beforeUnmount 钩子。组件被移除且效果清理完毕后，会调用 unmounted 钩子。

特殊生命周期钩子

Vue 提供了一些特殊的生命周期钩子用于特定场景

当组件被 <KeepAlive> 包裹时

组件被插入 DOM 时调用 activated
组件被移除但其状态被保留时调用 deactivated

调试钩子

用于调试目的

当组件的渲染过程追踪到响应式依赖时调用 renderTracked
当依赖项更改触发组件重新渲染时调用 renderTriggered

错误处理

当捕获到来自子组件的错误时调用 errorCaptured

服务器端渲染

在服务器端渲染之前调用 serverPrefetch，并可以返回一个 Promise 来延迟渲染直到数据获取完毕

来源：packages/runtime-core/src/component.ts556-568 packages/runtime-core/src/apiLifecycle.ts

Options API vs Composition API

Vue 提供了两种定义组件生命周期钩子的方式

Options API

组合式 API

在 Composition API 中，生命周期钩子在 setup() 函数内部通过导入的函数调用。对应关系如下：

Options API	组合式 API
beforeCreate	setup() 函数本身
created	setup() 函数本身
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
activated	onActivated
deactivated	onDeactivated
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered
serverPrefetch	onServerPrefetch

来源：packages/runtime-core/src/index.ts47-60

详细组件生命周期图

以下图表展示了组件生命周期钩子如何与 Vue 渲染系统集成的更详细视图

来源： packages/runtime-core/src/component.ts604-706 packages/runtime-core/src/component.ts799-917 packages/runtime-core/src/renderer.ts270-278 packages/runtime-core/src/renderer.ts234-240

最佳实践

为任务选择正确的钩子:
- created 或 setup()：用于不需要 DOM 的数据初始化
- mounted：用于访问 DOM 元素或与第三方库集成
- beforeUnmount：用于清理事件监听器、计时器或订阅
- errorCaptured：用于处理子组件中的错误
注意异步操作:
- 确保在 beforeUnmount 中清理异步操作，以防止内存泄漏
- 在 SSR 中使用 onServerPrefetch 进行数据获取
注意执行顺序:
- 父组件的 beforeMount 在其子组件的 beforeMount 之前调用
- 子组件的 mounted 在父组件的 mounted 之前调用
- 子组件的 beforeUnmount/unmounted 在父组件的相应钩子之前调用
性能考量:
- 避免在频繁触发的钩子（如 beforeUpdate 和 updated）中执行昂贵的操作
- 如有必要，请考虑在更新相关的钩子中进行防抖或节流

来源： packages/runtime-core/src/componentOptions.ts518-563 packages/runtime-core/src/renderer.ts270-278

组件生命周期