Vue中Suspense组件详细介绍

<Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态。

异步依赖​

要了解 <Suspense> 所解决的问题和它是如何与异步依赖进行交互的,我们需要想象这样一种组件层级结构:

<Suspense>
└─ <Dashboard>├─ <Profile>│  └─ <FriendStatus>(组件有异步的 setup())└─ <Content>├─ <ActivityFeed> (异步组件)└─ <Stats>(异步组件)

在这个组件树中有多个嵌套组件,要渲染出它们,首先得解析一些异步资源。如果没有 <Suspense>,则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下,我们可能会在页面上看到三个旋转的加载态,在不同的时间显示出内容。

有了 <Suspense> 组件后,我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时,在顶层展示出加载中或加载失败的状态。

<Suspense> 可以等待的异步依赖有两种:

  1. 带有异步 setup() 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件。

  2. 异步组件。

async setup()

组合式 API 中组件的 setup() 钩子可以是异步的:

export default {async setup() {const res = await fetch(...)const posts = await res.json()return {posts}}
}

如果使用 <script setup>,那么顶层 await 表达式会自动让该组件成为一个异步依赖:

<script setup>
const res = await fetch(...)
const posts = await res.json()
</script><template>{{ posts }}
</template>

异步组件​

异步组件默认就是“suspensible”的。这意味着如果组件关系链上有一个 <Suspense>,那么这个异步组件就会被当作这个 <Suspense> 的一个异步依赖。在这种情况下,加载状态是由 <Suspense> 控制,而该组件自己的加载、报错、延时和超时等选项都将被忽略。

异步组件也可以通过在选项中指定 suspensible: false 表明不用 Suspense 控制,并让组件始终自己控制其加载状态。

加载中状态​

<Suspense> 组件有两个插槽:#default 和 #fallback。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。

<Suspense><!-- 具有深层异步依赖的组件 --><Dashboard /><!-- 在 #fallback 插槽中显示 “正在加载中” --><template #fallback>Loading...</template>
</Suspense>

在初始渲染时,<Suspense> 将在内存中渲染其默认的插槽内容。如果在这个过程中遇到任何异步依赖,则会进入挂起状态。在挂起状态期间,展示的是后备内容。当所有遇到的异步依赖都完成后,<Suspense> 会进入完成状态,并将展示出默认插槽的内容。

如果在初次渲染时没有遇到异步依赖,<Suspense> 会直接进入完成状态。

进入完成状态后,只有当默认插槽的根节点被替换时,<Suspense> 才会回到挂起状态。组件树中新的更深层次的异步依赖不会造成 <Suspense> 回退到挂起状态。

发生回退时,后备内容不会立即展示出来。相反,<Suspense> 在等待新内容和异步依赖完成时,会展示之前 #default 插槽的内容。这个行为可以通过一个 timeout prop 进行配置:在等待渲染新内容耗时超过 timeout 之后,<Suspense> 将会切换为展示后备内容。若 timeout 值为 0 将导致在替换默认内容时立即显示后备内容。

事件​

<Suspense> 组件会触发三个事件:pendingresolve 和 fallbackpending 事件是在进入挂起状态时触发。resolve 事件是在 default 插槽完成获取新内容时触发。fallback 事件则是在 fallback 插槽的内容显示时触发。

例如,可以使用这些事件在加载新组件时在之前的 DOM 最上层显示一个加载指示器。

错误处理​

<Suspense> 组件自身目前还不提供错误处理,不过你可以使用 errorCaptured 选项或者 onErrorCaptured() 钩子,在使用到 <Suspense> 的父组件中捕获和处理异步错误。

和其他组件结合​

我们常常会将 <Suspense> 和 <Transition> 、<KeepAlive> 等组件结合。要保证这些组件都能正常工作,嵌套的顺序非常重要。

另外,这些组件都通常与 Vue Router 中的 <RouterView> 组件结合使用。

下面的示例展示了如何嵌套这些组件,使它们都能按照预期的方式运行。若想组合得更简单,你也可以删除一些你不需要的组件:

<RouterView v-slot="{ Component }"><template v-if="Component"><Transition mode="out-in"><KeepAlive><Suspense><!-- 主要内容 --><component :is="Component"></component><!-- 加载中状态 --><template #fallback>正在加载...</template></Suspense></KeepAlive></Transition></template>
</RouterView>

Vue Router 使用动态导入对懒加载组件进行了内置支持。这些与异步组件不同,目前他们不会触发 <Suspense>。但是,它们仍然可以有异步组件作为后代,这些组件可以照常触发 <Suspense>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务器负载均衡原理及算法

服务器负载均衡原理及算法 一、引言 随着互联网技术的飞速发展&#xff0c;网络服务的需求日益增长&#xff0c;单台服务器的性能往往难以满足大规模并发访问的需求。因此&#xff0c;服务器负载均衡技术应运而生&#xff0c;它能够有效地将网络请求分发到多台服务器上&#…

[C++/Linux] UDP编程

一. UDP函数 UDP&#xff08;用户数据报协议&#xff0c;User Datagram Protocol&#xff09;是一种无连接的网络协议&#xff0c;用于在互联网上交换数据。它允许应用程序发送数据报给另一端的应用程序&#xff0c;但不保证数据报能成功到达&#xff0c;也就是说&#xff0c;它…

双指针2s总结

5.双指针 双指针理论基础 那么vector< char > 和 string 又有什么区别呢&#xff1f; 其实在基本操作上没有区别&#xff0c;但是 string提供更多的字符串处理的相关接口&#xff0c;例如string 重载了&#xff0c;而vector却没有。 所以想处理字符串&#xff0c;我们…

Java常用类(二)

常用类&#xff08;二&#xff09; Object类 超类&#xff0c;基类&#xff0c;所有类的直接或间接父类&#xff0c;位于继承树的最高层任何类&#xff0c;如没有书写extends显示继承某个类&#xff0c;都默认直接继承Object类&#xff0c;否则为间接继承Object类中所定义的方…

C语言题目:数组寻找最小绝对值

题目描述 输入10个数&#xff0c;找出其中绝对值最小的数&#xff0c;将它和最后一个数交换&#xff0c;然后输出这10个数。 输入格式 十个数 输出格式 交换后的十个数 样例输入 10 2 30 40 50 60 70 80 90 100 样例输出 10 100 30 40 50 60 70 80 90 2 代码解析 包含…

扫描IP开放端口该脚本用于对特定目标主机进行常见端口扫描(加载端口字典)或者指定端口扫描,判断目标主机开

扫描IP开放端口该脚本用于对特定目标主机进行常见端口扫描(加载端口字典)或者指定端口扫描,判断目标主机开 #/bin/bash #该脚本用于对特定目标主机进行常见端口扫描(加载端口字典)或者指定端口扫描,判断目标主机开放来哪些端口 #用telnet方式 IP$1 #IP119.254.3.28 #获得IP的前…

BUUCTF刷题十一道(12)SSTI专题一

文章目录 学习文章[Flask]SSTI[GWCTF 2019]你的名字[第三章 web进阶]SSTI[pasecactf_2019]flask_ssti[NewStarCTF 公开赛赛道]BabySSTI_One[Dest0g3 520迎新赛]EasySSTI[NewStarCTF 公开赛赛道]BabySSTI_Two[NewStarCTF 公开赛赛道]BabySSTI_Three[GYCTF2020]FlaskApp[CSCCTF 2…

网易云歌曲评论抓取

网易云歌曲评论爬取 步骤1.找到一首歌曲2.按下F12键打开开发者模式,对其进行抓包3.查找获得评论数据的接口4.对获得评论数据接口进行分析5.构建加密函数方法一方法二运行结果全部代码使用Js文件只使用python新的代码小结与展望这次的任务是获取网易云音乐下面的评论,涉及的知…

List接口(1) | ArrayList

参考阅读&#xff1a;ArrayList 源码分析 一、特点 ArrayList 继承于 AbstractList &#xff0c;实现了 List, RandomAccess, Cloneable, java.io.Serializable 这些接口&#xff0c;具有以下特点&#xff1a; 支持添加&#xff0c;删除和查找操作支持随机快速访问&#xff…

前端ocr技术:electron+vue3中使用tesseract插件识别图片中字符

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、electron各种csp问题二、试用插件总结 前言 项目需要ocr技术识别图片中的中文字符&#xff0c;本来这部分是后端的工作&#xff0c;但是因为各种原因&#xff0c;决定前端也做一个版本。 在ai时代之前&#xff0c;o…

基于spring boot的漫画之家系统

基于spring boot的漫画之家系统设计与实现 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&…

pta L1-012 计算指数

L1-012 计算指数 分数 5 全屏浏览 切换布局 作者 陈越 单位 浙江大学 真的没骗你&#xff0c;这道才是简单题 —— 对任意给定的不超过 10 的正整数 n&#xff0c;要求你输出 2n。不难吧&#xff1f; 输入格式&#xff1a; 输入在一行中给出一个不超过 10 的正整数 n。 …

Java排序算法

冒泡排序 相邻两个元素比较&#xff0c;每次排序获得一个当前排序区间的最大值 // 冒泡排序 // 外层循环每次最后一个元素已经是最大的了&#xff0c;所以每次循环都减少一个元素 for (int i arr.length - 1; i >0; i--) {// 内层循环每次都是从第一个元素开始&#xff0c;…

鲁棒线性模型估计(Robust linear model estimation)

鲁棒线性模型估计 1.RANSAC算法1.1 算法的基本原理1.2 迭代次数N的计算1.3 参考代码 参考文献 当数据中出现较多异常点时&#xff0c;常用的线性回归OLS会因为这些异常点的存在无法正确估计线性模型的参数&#xff1a; W ( X T X ) − 1 X T Y \qquad \qquad W(X^TX)^{-1}X^T…

力扣热题100_链表_19_删除链表的倒数第 N 个结点

文章目录 题目链接解题思路解题代码 题目链接 19. 删除链表的倒数第 N 个结点 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5] 示例 2&am…

数据结构—图

图的基本概念 图就是由顶点的有穷非空集合和顶点之间的边组成的集合。通常表示为&#xff1a;G(V,E)&#xff0c;其中&#xff0c;G 表示一个图&#xff0c;V 表示顶点的集合&#xff0c;E 表示边的集合。 顶点 图中的数据元素&#xff0c;我们称之为顶点&#xff0c;图至少有…

2024年3月电子学会青少年软件编程 中小学生Python编程等级考试一级真题解析(判断题)

2024年3月Python编程等级考试一级真题解析 判断题&#xff08;共10题&#xff0c;每题2分&#xff0c;共20分&#xff09; 26、turtle 画布的坐标系原点是在画布的左上角 答案&#xff1a;错 考点分析&#xff1a;考查turtle相关知识&#xff0c;turtle画布坐标系是在画布的…

KNN分类算法的MATLAB实现以及可视化

一、KNN简介 KNN算法&#xff0c;即K-Nearest Neighbors&#xff0c;是一种常用的监督学习算法&#xff0c;可以用于分类问题&#xff0c;并且在实际应用中取得了广泛的成功。 二、KNN算法的基本原理 对于给定的测试样本&#xff0c;KNN算法首先计算它与训练集中所有样本的距…

服务器硬件基础知识解析

导言 在当今信息化时代&#xff0c;服务器扮演着至关重要的角色&#xff0c;它们是存储、处理和传输数据的关键设备。本文将介绍服务器硬件的基础知识&#xff0c;包括服务器的组成部分、硬件选型和性能评估等内容&#xff0c;旨在帮助读者更好地理解和应用服务器技术。 服务…

【数据库】规划与分析

目录 1.规划与分析 的步骤&#xff08;3步&#xff09;&#xff1f; 2.系统规划与定义 的步骤&#xff08;4步&#xff09;&#xff1f; 3.可行性分析 的步骤&#xff08;4步&#xff09;&#xff1f;&#xff08;-表示包括 、和/表示并列&#xff09; 4.项目规划 的步…