当前位置: 首页 > 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 < …...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...