当前位置：首页 > news >正文

Vue3 生命周期全面解析：从创建到销毁的完整指南

news 2026/6/27 23:40:33

Vue3 作为前端开发的主流框架，其生命周期机制是组件开发的核心。理解生命周期不仅能优化性能，还能避免资源泄漏等问题。本文将深入剖析 Vue3 生命周期的每个阶段，结合代码示例和最佳实践，助你掌握组件从创建到销毁的全流程。

一、Vue3 生命周期概述

Vue3 的生命周期指组件从创建、挂载、更新到销毁的完整过程。Vue 在关键节点提供钩子函数（Hooks），允许开发者插入自定义逻辑。与 Vue2 相比，Vue3 的改动包括：

废弃beforeCreate和created，由setup()替代；
重命名beforeDestroy为beforeUnmount，destroyed为unmounted；
引入Composition API，通过onXxx函数管理生命周期逻辑。

二、生命周期阶段详解

1. 初始化阶段：`setup()`

setup()是 Composition API 的入口，在组件实例创建前执行。此时无法访问this，但可接收props和context参数：

import { ref } from 'vue'; export default { setup(props, { attrs, slots, emit }) { const count = ref(0); // 初始化响应式数据 const increment = () => count.value++; return { count, increment }; // 暴露给模板 } };

作用：集中管理数据、方法和生命周期钩子，避免与选项式 API 的冲突。

2. 创建阶段：`onBeforeMount`与`onMounted`

onBeforeMount：在组件挂载前调用，此时 DOM 未生成，但模板已编译。适合进行初始化准备：
```
import { onBeforeMount } from 'vue'; onBeforeMount(() => { console.log('DOM 即将挂载，但当前不可见'); });
```

onMounted：组件挂载完成后调用，可安全操作 DOM。常用于第三方库初始化：

import { onMounted } from 'vue'; onMounted(() => { const chart = initChart(document.getElementById('chart')); });

最佳实践：在onMounted中发起异步请求，避免在setup中直接操作 DOM。

3. 更新阶段：`onBeforeUpdate`与`onUpdated`

onBeforeUpdate：数据变化后、DOM 更新前调用。可获取更新前的 DOM 状态：

import { onBeforeUpdate, ref } from 'vue'; const message = ref('Hello'); onBeforeUpdate(() => { console.log('数据已更新，DOM 尚未重渲染'); });

onUpdated：DOM 更新完成后调用。注意避免无限循环：

import { onUpdated, ref } from 'vue'; const count = ref(0); onUpdated(() => { count.value++; // 错误示例：会导致无限更新 });

应用场景：根据数据变化调整滚动位置或动画效果。

4. 销毁阶段：`onBeforeUnmount`与`onUnmounted`

onBeforeUnmount：组件卸载前调用，需清理定时器、取消请求等：

import { onBeforeUnmount, ref } from 'vue'; const timer = ref(null); onBeforeUnmount(() => { clearInterval(timer.value); });

onUnmounted：组件卸载后调用，此时 DOM 已移除：

import { onUnmounted } from 'vue'; onUnmounted(() => { console.log('组件已销毁，资源已释放'); });

关键点：务必在onBeforeUnmount中清理资源，防止内存泄漏。

5. 错误捕获：`onErrorCaptured`

处理子组件错误，支持返回false阻止错误传播：

import { onErrorCaptured } from 'vue'; onErrorCaptured((err, vm, info) => { console.error('捕获到错误:', err); return true; // 默认继续传播 });

三、Vue3 与 Vue2 的生命周期对比

阶段	Vue3 (Composition API)	Vue2 (Options API)
初始化	`setup()`	`beforeCreate`/`created`
挂载	`onBeforeMount`/`onMounted`	`beforeMount`/`mounted`
更新	`onBeforeUpdate`/`onUpdated`	`beforeUpdate`/`updated`
销毁	`onBeforeUnmount`/`onUnmounted`	`beforeDestroy`/`destroyed`

核心差异：

Vue3 通过setup()统一管理初始逻辑，减少代码分散；
钩子函数需从vue导入，显式声明依赖；
支持onActivated和onDeactivated处理动态组件缓存。

四、生命周期实战示例

示例 1：数据初始化与请求

import { ref, onMounted } from 'vue'; export default { setup() { const data = ref([]); const fetchData = async () => { const response = await fetch('https://api.example.com/data'); data.value = await response.json(); }; onMounted(fetchData); return { data }; } };

示例 2：资源清理与防抖

import { ref, onBeforeUnmount } from 'vue'; const searchInput = ref(null); let timer = null; const handleSearch = () => { clearTimeout(timer); timer = setTimeout(() => { console.log('执行搜索逻辑...'); }, 300); }; onBeforeUnmount(() => { clearTimeout(timer); });

五、最佳实践与常见问题

1. 避免在`onUpdated`中修改数据

// 错误示范

onUpdated(() => { count.value++; // 导致无限循环 });

2. 使用`onActivated`和`onDeactivated`优化动态组件

onActivated(() => { console.log('组件被激活'); }); onDeactivated(() => { console.log('组件被停用'); });

3. 调试技巧

通过onRenderTracked和onRenderTriggered追踪依赖变化：

import { onRenderTracked, onRenderTriggered } from 'vue'; onRenderTracked((e) => { console.log('依赖被追踪:', e.target); }); onRenderTriggered((e) => { console.log('依赖被触发:', e.target); });