DAY05:深入解析生命周期与钩子函数

news2025/5/14 14:17:19
引言

在 Vue 开发中，生命周期和钩子函数是理解组件行为的关键。无论是初始化数据、操作 DOM，还是清理资源，生命周期钩子都提供了精确的控制点。本文将从基础理论出发，结合项目实战，详细剖析 Vue 3 的生命周期机制、组合式 API 的使用，以及如何集成异步请求（如 axios）实现数据加载与状态管理。通过一个完整的用户数据加载案例，你将掌握如何高效利用钩子函数优化应用性能。

第一部分：生命周期基础与图示解析

1.1 什么是组件生命周期？

组件的生命周期是指从创建、挂载到更新、卸载的完整过程。Vue 通过一系列钩子函数（如 onMounted、onUpdated）让开发者能够在特定阶段插入自定义逻辑。理解这些阶段的顺序和触发条件，是构建健壮应用的基础。

1.2 Vue 3 生命周期阶段详解

  1. 初始化阶段（Setup）

    • 触发条件：组件实例被创建时，组合式 API 的 setup() 函数最先执行。

    • 核心任务：初始化响应式状态（ref、reactive）、计算属性（computed）等。

    • 注意事项：此时尚未生成 DOM，无法访问 this 或 DOM 元素。

  2. 挂载前阶段（Before Mount）

    • 钩子函数：onBeforeMount

    • 触发时机：在 DOM 挂载之前调用，此时模板已编译但未渲染到页面。

    • 典型场景：极少直接使用，但可用于某些需要预处理的逻辑。

  3. 挂载阶段（Mounted）

    • 钩子函数：onMounted

    • 触发时机：DOM 已挂载，可以安全访问 DOM 元素或子组件。

    • 常见用途：发起异步请求、初始化第三方库（如图表插件）。

  4. 更新阶段（Update）

    • 钩子函数：onBeforeUpdate、onUpdated

    • 触发条件：响应式数据变化导致 DOM 需要重新渲染时。

    • 注意点：避免在 onUpdated 中修改状态，否则可能引发无限循环。

  5. 卸载阶段（Unmount）

    • 钩子函数：onBeforeUnmount、onUnmounted

    • 触发时机：组件实例被销毁前，用于清理定时器、取消网络请求等。

  6. 错误处理（Error Handling）

    • 钩子函数：onErrorCaptured

    • 用途：捕获子组件传递的错误，实现全局错误处理。

1.3 生命周期执行顺序示例

假设一个组件从创建到销毁的完整流程，钩子函数的调用顺序如下：

setup() → onBeforeMount() → onMounted() → onBeforeUpdate() → onUpdated() → onBeforeUnmount() → onUnmounted()

第二部分：组合式 API 深度解析

2.1 组合式 API 的优势

与选项式 API（data、methods 分块）不同，组合式 API 通过逻辑功能组织代码，解决了复杂组件中代码分散的问题。例如，所有与用户数据相关的逻辑（获取、加载、错误处理）可以聚合在同一区域。

2.2 核心钩子函数详解
1. onMounted：挂载后的起点

基本语法：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
  }
}

实战场景：

  • 数据获取：从后端 API 加载初始数据。

  • DOM 操作：初始化需要访问 DOM 的库（如 D3.js）。

  • 事件监听：添加窗口大小监听器。

常见误区：

  • 在 onMounted 中修改响应式数据不会触发额外的挂载，但可能引起更新阶段的钩子执行。

2. onUpdated：响应数据变化

基本语法：

import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('数据更新导致 DOM 重新渲染');
});

注意事项：

  • 此钩子在每次数据变化后触发，频繁操作可能导致性能问题。

  • 使用条件判断避免无限循环：

    onUpdated(() => {
  if (needUpdate.value) {
    // 执行逻辑
    needUpdate.value = false; // 重置状态
  }
});

3. onUnmounted：资源清理

关键作用：

  • 取消未完成的网络请求（如 Axios 的 CancelToken）。

  • 移除事件监听器，避免内存泄漏。

  • 清理定时器、动画帧等。

示例代码：

import { onUnmounted } from 'vue';

setup() {
  const timer = setInterval(() => {
    // 轮询任务
  }, 1000);

  onUnmounted(() => {
    clearInterval(timer);
  });
}

第三部分：异步请求与 Axios 集成实战

3.1 为什么选择 Axios？

  • 功能丰富：支持拦截器、取消请求、自动转换 JSON 数据。

  • 浏览器兼容性：兼容主流浏览器，包括旧版本 IE。

  • 社区支持：广泛使用，问题解决方案丰富。

3.2 在 Vue 3 中集成 Axios

步骤 1：安装与基本配置

npm install axios

步骤 2：创建 Axios 实例（推荐）

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器
service.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

export default service;
3.3 在组件中发起请求

基础示例：

import { ref, onMounted } from 'vue';
import axios from '../utils/request';

export default {
  setup() {
    const users = ref([]);
    const isLoading = ref(false);
    const error = ref(null);

    const fetchUsers = async () => {
      isLoading.value = true;
      try {
        const response = await axios.get('/users');
        users.value = response.data;
      } catch (err) {
        error.value = err.message;
      } finally {
        isLoading.value = false;
      }
    };

    onMounted(fetchUsers);

    return { users, isLoading, error };
  }
};

优化技巧：

  1. 请求取消：在组件卸载时中断未完成的请求。

  2. 节流控制：避免短时间内重复请求。

  3. 错误统一处理：通过拦截器集中管理错误提示。

第四部分：实战项目：用户数据加载与动画实现

4.1 项目结构与依赖
src/
|-- components/
|   |-- UserList.vue
|-- utils/
|   |-- request.js
|-- App.vue
4.2 实现用户数据加载

UserList.vue：

<template>
  <div class="user-list">
    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-indicator">
      <div class="spinner"></div>
      <span>Loading...</span>
    </div>

    <!-- 错误提示 -->
    <div v-else-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 数据展示 -->
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from '../utils/request';

export default {
  setup() {
    const users = ref([]);
    const isLoading = ref(false);
    const error = ref(null);

    const fetchUsers = async () => {
      isLoading.value = true;
      try {
        const response = await axios.get('/users');
        users.value = response.data;
      } catch (err) {
        error.value = 'Failed to load users: ' + err.message;
      } finally {
        isLoading.value = false;
      }
    };

    onMounted(() => {
      fetchUsers();
    });

    return { users, isLoading, error };
  }
};
</script>

<style scoped>
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #ccc;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error-message {
  color: #e74c3c;
  padding: 20px;
  text-align: center;
}

.user-list ul {
  list-style: none;
  padding: 0;
}

.user-list li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
4.3 高级加载动画优化

骨架屏（Skeleton Screen）
在数据加载前展示占位符，提升用户感知性能：

<template>
  <div v-if="isLoading" class="skeleton">
    <div class="skeleton-item" v-for="i in 5" :key="i"></div>
  </div>
</template>

<style>
.skeleton-item {
  height: 50px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  margin: 10px 0;
  border-radius: 4px;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
</style>

第五部分：性能优化与最佳实践

5.1 生命周期使用准则

  1. 避免在 onUpdated 中频繁操作
    优先使用计算属性（computed）或侦听器（watch）响应数据变化。

  2. 及时清理资源
    在 onUnmounted 中移除全局事件监听器、定时器等。

  3. 合理拆分组件
    将复杂逻辑拆分为多个组合式函数（如 useUser、useCart）。

5.2 异步请求优化策略

  • 请求缓存：对相同 URL 的请求进行缓存，减少服务器压力。

  • 分页加载：结合 onMounted 和滚动事件实现无限滚动。

  • 请求竞态处理：使用 AbortController 取消过期请求。

AbortController 示例：

const controller = new AbortController();

axios.get('/users', {
  signal: controller.signal
});

// 在组件卸载时取消
onUnmounted(() => {
  controller.abort();
});

第六部分：常见问题解答

Q1：在 setup 中可以直接调用异步函数吗？
A：可以，但需注意 setup 本身是同步的。推荐在 onMounted 中调用或在 setup 中使用立即执行函数：

setup() {
  const data = ref(null);
  
  (async () => {
    data.value = await fetchData();
  })();

  return { data };
}

Q2：为什么有时候 onUpdated 会无限触发？
A：如果在 onUpdated 中修改了响应式数据，且未设置终止条件，会导致循环更新。确保修改前检查是否必要。

Q3：组合式 API 中如何处理跨组件生命周期？
A：使用 provide/inject 结合生命周期钩子，或在状态管理库（如 Pinia）中管理。

结语

深入理解 Vue 3 生命周期和钩子函数，是构建高效、可维护应用的关键。通过本文的理论解析与实战演示，相信你已经掌握了如何利用组合式 API 管理组件行为、集成异步请求，并优化用户体验。继续探索更多高级特性（如 KeepAlive、Suspense），你的 Vue 开发技能将更上一层楼！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2375453.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python如何提取Chrome中的保存的网站登录用户名密码？

python如何提取Chrome中的保存的网站登录用户名密码？

很多浏览器都贴心地提供了保存用户密码功能&#xff0c;用户一旦开启&#xff0c;就不需要每次都输入用户名、密码&#xff0c;非常方便。作为python脚本&#xff0c;能否拿到用户提前保存在浏览器中的用户名密码&#xff0c;用以自动登录呢&#xff1f;必须有&#xff0c;小爬…
阅读更多...
Redis实现分布式获取全局唯一自增ID的案例。

Redis实现分布式获取全局唯一自增ID的案例。

【1】简易自增版本(从 1 开始 1,2,3&#xff0c;...) 项目结构 下面是一个基于 RedisTemplate 实现的分布式全局唯一自增 ID 生成器的案例。适用于 Java Spring Boot 环境&#xff0c;利用 Redis 的原子操作 INCR 指令。 ✅ 原理说明 Redis 提供的 INCR 命令是原子性的&…
阅读更多...
人脸识别备案：筑牢人脸信息 “安全墙”

人脸识别备案：筑牢人脸信息 “安全墙”

人脸识别备案制度主要依据《人脸识别技术应用安全管理办法》建立&#xff0c;人脸识别技术广泛应用于安防、金融、门禁、交通等领域&#xff0c;带来便利高效的同时&#xff0c;人脸信息安全问题也引发担忧。为规范技术应用、保护个人信息权益&#xff0c;人脸识别备案制度应运…
阅读更多...
基于RT-Thread的STM32F4开发第三讲——DAC

基于RT-Thread的STM32F4开发第三讲——DAC

文章目录 前言一、DAC是什么&#xff1f;二、RT-Thread工程创建三、DAC函数编写1.DAC.c2.DAC.h3.main.c 四、结果测试五、工程分享 前言 本章利用RT-Thread最新的驱动5.1.0开发DAC模块&#xff0c;使用的开发板是正点原子的STM32F4探索者。很多配置和上文重复&#xff0c;本文…
阅读更多...
网络状态可以通过hutool.HttpStatus获取

网络状态可以通过hutool.HttpStatus获取

网络状态可以通过hutool.HttpStatus获取 全部都是静态int类型
阅读更多...
Gemini 2.5 推动视频理解进入新时代

Gemini 2.5 推动视频理解进入新时代

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
谈谈各种IO模型

谈谈各种IO模型

目前的IO模型有5种&#xff1a;BIO&#xff08;阻塞IO&#xff09;、NIO&#xff08;非阻塞IO&#xff09;、IO多路复用、信号驱动IO、异步IO&#xff08;AIO&#xff09; 了解这些模型之前&#xff0c;我们需要先知道IO模型中的几个概念&#xff1a;阻塞&非阻塞、同步&am…
阅读更多...
Linux系统管理与编程20：Apache

Linux系统管理与编程20：Apache

兰生幽谷&#xff0c;不为莫服而不芳&#xff1b; 君子行义&#xff0c;不为莫知而止休。 做好网络和yum配置&#xff0c;用前面dns规划的www的IP进行。 #!/bin/bash #----------------------------------------------------------- # File Name: myWeb.sh # Version: 1.0 # …
阅读更多...
BFS算法篇——打开智慧之门，BFS算法在拓扑排序中的诗意探索(下）

BFS算法篇——打开智慧之门，BFS算法在拓扑排序中的诗意探索(下）

文章目录 引言一、课程表1.1 题目链接&#xff1a;https://leetcode.cn/problems/course-schedule/description/1.2 题目分析&#xff1a;1.3 思路讲解&#xff1a;1.4 代码实现&#xff1a; 二、课程表||2.1 题目链接&#xff1a;https://leetcode.cn/problems/course-schedul…
阅读更多...
【入门】纸盒的最大体积是多少？

【入门】纸盒的最大体积是多少？

描述 在一张尺寸为 n * n 厘米的正方形硬纸板的四个角上&#xff0c;分别裁剪掉一个 m * m 厘米的小正方形&#xff0c;就可以做成一个无盖纸盒&#xff0c;请问这个无盖纸盒的最大体积是多少&#xff1f; 立方体的体积 v 底面积 * 高&#xff09; 比如&#xff1a; n 5 &am…
阅读更多...
QT5.14安装以及新建基础项目

QT5.14安装以及新建基础项目

进入qt中文网站&#xff1a;Qt | 软件开发全周期的各阶段工具 额&#xff0c;考虑新手可能还是找不到&#xff0c;我就分享一下我下载的的吧 通过网盘分享的文件&#xff1a;qt-opensource-windows-x86-5.14.2.exe 链接:https://pan.baidu.com/s/1yQTRp-b_ISje5B3UWb7Apw?pw…
阅读更多...
KV cache 缓存与量化：加速大型语言模型推理的关键技术

KV cache 缓存与量化：加速大型语言模型推理的关键技术

引言 在大型语言模型&#xff08;LLM&#xff09;的推理过程中&#xff0c;KV 缓存&#xff08;Key-Value Cache&#xff09; 是一项至关重要的优化技术。自回归生成&#xff08;如逐 token 生成文本&#xff09;的特性决定了模型需要反复利用历史token的注意力计算结果&#…
阅读更多...
BlockMesh Ai项目 监控节点部署教程

BlockMesh Ai项目 监控节点部署教程

项目介绍 BlockMesh 是一个创新、开放且安全的网络&#xff0c;允许用户轻松地将多余的带宽货币化。 它为用户提供了被动获利并参与人工智能数据层、在线隐私、开源和区块链行业前沿的绝佳机会。 此教程为Linux系统教程 教程开始 首先到这里注册账号&#xff0c;注册后保存…
阅读更多...
【Bluedroid】蓝牙 HID DEVICE 初始化流程源码解析

【Bluedroid】蓝牙 HID DEVICE 初始化流程源码解析

本文深入剖析Android蓝牙协议栈中HID设备&#xff08;BT-HD&#xff09;服务的初始化与启用流程&#xff0c;从接口初始化、服务掩码管理、服务请求路由到属性回调通知&#xff0c;完整展现蓝牙HID服务激活的技术路径。通过代码逻辑梳理&#xff0c;揭示服务启用的核心机制&…
阅读更多...
iOS创建Certificate证书、制作p12证书流程

iOS创建Certificate证书、制作p12证书流程

一、创建Certificates 1、第一步得先在苹果电脑上创建一个.certSigningRequest的文件。首先打开钥匙串&#xff0c;使用快捷键【command空格】——输入【钥匙串】回车&#xff08;找不到就搜一下钥匙串访问使用手册&#xff09; 2、然后在苹果电脑的左上角菜单栏选择【钥匙串…
阅读更多...
curl发送数据不为null，但是后端接收到为null

curl发送数据不为null，但是后端接收到为null

curl -X POST http://localhost:8080/xiaozhi/test --header "Content-Type: application/json" -d "{\"age\":123}"经过检查发现注解导入错误 正确的应该是 import org.springframework.web.bind.annotation.RequestBody;
阅读更多...
blazor与硬件通信实现案例

blazor与硬件通信实现案例

在网页接入硬件交互通信方案这篇博客中，曾经提到了网页中接入各种硬件操作的方法，即通过Windows Service作为指令的中转，并建立websocket通信连接，进而实现接入硬件的各种操作。这篇博客就以实际的案例来讲解具体怎么实现。 一、建立Windows Service项目 比如我就建立了一…
阅读更多...
Linux下mysql的安装与远程链接

Linux下mysql的安装与远程链接

linux安装mysql 01下载依赖&#xff1a; 找到网址/download下&#xff1a; 最下面MySQL Community&#xff08;mysql社区版&#xff09; 选择MySQL Community Server 选择对应的mysql版本 操作系统版本选择 根据操作系统的版本选择具体版本号 下载离线版本 安装包详情 0…
阅读更多...
【HT周赛】T3.二维平面 题解（分块：矩形chkmax，求矩形和）

【HT周赛】T3.二维平面 题解（分块：矩形chkmax，求矩形和）

题意 需要维护 n n n \times n nn 平面上的整点&#xff0c;每个点 ( x , y ) (x, y) (x,y) 有权值 V ( x , y ) V(x, y) V(x,y)&#xff0c;初始都为 0 0 0。 同时给定 n n n 次修改操作&#xff0c;每次修改给出 x 1 , x 2 , y 1 , y 2 , v x_1, x_2, y_1, y_2, v x…
阅读更多...
qemu热迁移后内存占用突增问题

qemu热迁移后内存占用突增问题

1.问题描述 虚拟机配置了memoryBackingmemfd的情况下&#xff0c;热迁移虚拟机后&#xff0c;在目的节点 qemu-kvm 进程占用 rss 会突增很多。 如果去掉这个配置没这个现象。 <memoryBacking><source typememfd/> </memoryBacking>2.问题现象 2.1 不配置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023