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

Vue.js `Suspense` 和异步组件加载

Vue.js Suspense 和异步组件加载

今天我们来聊聊 Vue 3 中的一个强大特性:<Suspense> 组件,以及它如何帮助我们更优雅地处理异步组件加载。如果你曾在 Vue 项目中处理过异步组件加载,那么这篇文章将为你介绍一种更简洁高效的方式。

什么是 <Suspense>

<Suspense> 是 Vue 3 引入的一个内置组件,用于协调组件树中异步依赖的处理。它允许我们在等待异步组件或异步操作完成时,展示一个加载状态,从而提升用户体验。

异步组件加载的常见场景

在大型应用中,我们通常会将组件按需加载,以减少初始加载时间。这通常通过异步组件实现,例如:

<script>
export default {components: {AsyncComponent: defineAsyncComponent(() =>import('./AsyncComponent.vue')),},
};
</script>

在上述示例中,AsyncComponent 会在需要时按需加载。然而,在加载过程中,我们可能希望向用户展示一个加载指示器,以提升用户体验。

使用 <Suspense> 处理异步组件加载

<Suspense> 组件使处理异步组件加载变得更加简单。我们可以将异步组件包装在 <Suspense> 中,并提供一个 #fallback 插槽来定义加载时的占位内容。

示例:

<template><Suspense><!-- 异步加载的组件 --><AsyncComponent /><!-- 加载时显示的占位内容 --><template #fallback><div>加载中...</div></template></Suspense>
</template><script>
import { defineAsyncComponent } from 'vue';export default {components: {AsyncComponent: defineAsyncComponent(() =>import('./AsyncComponent.vue')),},
};
</script>

在这个示例中,当 AsyncComponent 正在加载时,用户将看到“加载中…”的提示。一旦组件加载完成,<Suspense> 将自动渲染 AsyncComponent

<Suspense> 的工作原理

<Suspense> 会在初始渲染时检查其默认插槽(即 AsyncComponent)是否包含任何异步依赖项。如果发现异步依赖项,它会进入挂起状态,并渲染 #fallback 插槽中的内容。一旦所有异步依赖项都解析完毕,<Suspense> 将切换到完成状态,渲染默认插槽的内容。

注意事项

  • 嵌套使用:当有嵌套的异步组件时,可以使用嵌套的 <Suspense> 组件来分别处理每个异步组件的加载状态。

  • 事件<Suspense> 提供了 pendingresolvefallback 事件,分别在进入挂起状态、完成状态和显示后备内容时触发。

  • 错误处理<Suspense> 本身不处理错误,但可以在父组件中使用 errorCaptured 钩子来捕获和处理异步错误。

总结

<Suspense> 组件为 Vue 3 带来了更优雅的异步组件加载处理方式。通过使用 <Suspense>,我们可以在等待异步组件加载时向用户展示友好的加载指示器,从而提升用户体验。

相关文章:

Vue.js `Suspense` 和异步组件加载

Vue.js Suspense 和异步组件加载 今天我们来聊聊 Vue 3 中的一个强大特性&#xff1a;<Suspense> 组件&#xff0c;以及它如何帮助我们更优雅地处理异步组件加载。如果你曾在 Vue 项目中处理过异步组件加载&#xff0c;那么这篇文章将为你介绍一种更简洁高效的方式。 什…...

HTB:LinkVortex[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用gobuster对靶机进行路径FUZZ 使用ffuf堆靶机…...

Linux命令入门

Linux命令入门 ls命令 ls命令的作用是列出目录下的内容&#xff0c;语法细节如下: 1s[-a -l -h] [Linux路径] -a -l -h是可选的选项 Linux路径是此命令可选的参数 当不使用选项和参数,直接使用ls命令本体,表示:以平铺形式,列出当前工作目录下的内容 ls命令的选项 -a -a选项&a…...

【问题】Chrome安装不受支持的扩展 解决方案

此扩展程序已停用&#xff0c;因为它已不再受支持 Chromium 建议您移除它。详细了解受支持的扩展程序 此扩展程序已停用&#xff0c;因为它已不再受支持 详情移除 解决 1. 解压扩展 2.打开manifest.json 3.修改版本 将 manifest_version 改为3及以上 {"manifest_ver…...

【题解】AtCoder Beginner Contest ABC391 D Gravity

题目大意 原题面链接 在一个 1 0 9 W 10^9\times W 109W 的平面里有 N N N 个方块。我们用 ( x , y ) (x,y) (x,y) 表示第 x x x 列从下往上数的 y y y 个位置。第 i i i 个方块的位置是 ( x i , y i ) (x_i,y_i) (xi​,yi​)。现在执行无数次操作&#xff0c;每一次…...

使用 SpringBoot+Thymeleaf 模板引擎进行 Web 开发

目录 一、什么是 Thymeleaf 模板引擎 二、Thymeleaf 模板引擎的 Maven 坐标 三、配置 Thymeleaf 四、访问页面 五、访问静态资源 六、Thymeleaf 使用示例 七、Thymeleaf 常用属性 前言 在现代 Web 开发中&#xff0c;模板引擎被广泛用于将动态内容渲染到静态页面中。Thy…...

【Java异步编程】CompletableFuture综合实战:泡茶喝水与复杂的异步调用

文章目录 一. 两个异步任务的合并&#xff1a;泡茶喝水二. 复杂的异步调用&#xff1a;结果依赖&#xff0c;以及异步执行调用等 一. 两个异步任务的合并&#xff1a;泡茶喝水 下面的代码中我们实现泡茶喝水。这里分3个任务&#xff1a;任务1负责洗水壶、烧开水&#xff0c;任…...

Nginx知识

nginx 精简的配置文件 worker_processes 1; # 可以理解为一个内核一个worker # 开多了可能性能不好events {worker_connections 1024; } # 一个 worker 可以创建的连接数 # 1024 代表默认一般不用改http {include mime.types;# 代表引入的配置文件# mime.types 在 ngi…...

Unity开发游戏使用XLua的基础

Unity使用Xlua的常用编码方式&#xff0c;做一下记录 1、C#调用lua 1、Lua解析器 private LuaEnv env new LuaEnv();//保持它的唯一性void Start(){env.DoString("print(你好lua)");//env.DoString("require(Main)"); 默认在resources文件夹下面//帮助…...

AI-ISP论文Learning to See in the Dark解读

论文地址&#xff1a;Learning to See in the Dark 图1. 利用卷积网络进行极微光成像。黑暗的室内环境。相机处的照度小于0.1勒克斯。索尼α7S II传感器曝光时间为1/30秒。(a) 相机在ISO 8000下拍摄的图像。(b) 相机在ISO 409600下拍摄的图像。该图像存在噪点和色彩偏差。©…...

OpenCV:开运算

目录 1. 简述 2. 用腐蚀和膨胀实现开运算 2.1 代码示例 2.2 运行结果 3. 开运算接口 3.1 参数详解 3.2 代码示例 3.3 运行结果 4. 开运算应用场景 5. 注意事项 6. 总结 相关阅读 OpenCV&#xff1a;图像的腐蚀与膨胀-CSDN博客 OpenCV&#xff1a;闭运算-CSDN博客 …...

38. RTC实验

一、RTC原理详解 1、6U内部自带到了一个RTC外设&#xff0c;确切的说是SRTC。6U和6ULL的RTC内容在SNVS章节。6U的RTC分为LP和HP。LP叫做SRTC&#xff0c;HP是RTC&#xff0c;但是HP的RTC掉电以后数据就丢失了&#xff0c;即使用了纽扣电池也没用。所以必须要使用LP&#xff0c…...

Flutter 新春第一弹,Dart 宏功能推进暂停,后续专注定制数据处理支持

在去年春节&#xff0c;Flutter 官方发布了宏&#xff08;Macros&#xff09;编程的原型支持&#xff0c; 同年的 5 月份在 Google I/O 发布的 Dart 3.4 宣布了宏的实验性支持&#xff0c;但是对于 Dart 内部来说&#xff0c;从启动宏编程实验开始已经过去了几年&#xff0c;但…...

巴菲特价值投资思想的核心原则

巴菲特价值投资思想的核心原则 关键词&#xff1a;安全边际、长期投资、内在价值、管理团队、经济护城河、简单透明 摘要&#xff1a;本文深入探讨了巴菲特价值投资思想的核心原则&#xff0c;包括安全边际、长期投资、企业内在价值、优秀管理团队、经济护城河和简单透明的业务…...

C 或 C++ 中用于表示常量的后缀:1ULL

1ULL 是一个在 C 或 C 中用于表示常量的后缀&#xff0c;它具体指示编译器将这个数值视为特定类型的整数。让我们详细解释一下&#xff1a; 1ULL 的含义 1: 这是最基本的部分&#xff0c;表示数值 1。U: 表示该数值是无符号&#xff08;Unsigned&#xff09;的。这意味着它只…...

vue3中el-input无法获得焦点的问题

文章目录 现象两次nextTick()加setTimeout()解决结论 现象 el-input被外层div包裹了&#xff0c;设置autofocus不起作用&#xff1a; <el-dialog v-model"visible" :title"title" :append-to-bodytrue width"50%"><el-form v-model&q…...

程序诗篇里的灵动笔触:指针绘就数据的梦幻蓝图<3>

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。 今天我们来对上一节做一些小补充&#xff0c;了解学习一下assert断言&#xff0c;指针的使用和传址调用…...

(三)QT——信号与槽机制——计数器程序

目录 前言 信号&#xff08;Signal&#xff09;与槽&#xff08;Slot&#xff09;的定义 一、系统自带的信号和槽 二、自定义信号和槽 三、信号和槽的扩展 四、Lambda 表达式 总结 前言 信号与槽机制是 Qt 中的一种重要的通信机制&#xff0c;用于不同对象之间的事件响…...

Qt 5.14.2 学习记录 —— 이십이 QSS

文章目录 1、概念2、基本语法3、给控件应用QSS设置4、选择器1、子控件选择器2、伪类选择器 5、样式属性box model 6、实例7、登录界面 1、概念 参考了CSS&#xff0c;都是对界面的样式进行设置&#xff0c;不过功能不如CSS强大。 可通过QSS设置样式&#xff0c;也可通过C代码…...

Hot100之哈希

1两数之和 题目 思路解析 解法1--两次循环 解法2--哈希表一次循环 代码 解法1--两次循环 class Solution {public int[] twoSum(int[] nums, int target) {int nums1[] new int[2];int length nums.length;for (int i 0; i < length; i) {for (int j i 1; j < …...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...