vue3-内置组件-Suspense

Suspense (实验性功能)

<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。

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

异步依赖

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

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

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

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

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

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

  2. 异步组件。

async setup()

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

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>

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

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

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

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

事件

<Suspense> 组件会触发三个事件:pending、resolve 和 fallback。pending 事件是在进入挂起状态时触发。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>。

示例:模拟加载两个异步组件最终同步渲染:

子组件 1 promise 形式

组件 1 模拟文本内容 2 秒后变更值

<script lang="ts" setup>
import { ref } from 'vue'const result = ref(0)const init = () => {return new Promise((resolve) => {setTimeout(() => {result.value = 123return resolve({result})}, 3000)})
}
await init()
</script><template><div class="container"><h1>{{ result }}</h1></div>
</template><style lang="scss" scoped>
.container {
}
</style>

组件 2 模拟网络请求获取图片

<script lang="ts" setup>
import { ref } from 'vue'import axios from 'axios'const rowData = ref<any>()
rowData.value = await axios.get('https://dog.ceo/api/breeds/image/random')
</script><template><div class="container"><div><img class="img" :src="rowData && rowData?.data.message" alt="" /></div></div>
</template><style lang="scss" scoped>
.container {img {width: 200px;height: 100px;}
}
</style>

父组件异步加载两个组件

<script lang="ts" setup>
import { ref } from 'vue'
import Com25_1 from '@/components/demo/Com25-1.vue'
import Com25_2 from '@/components/demo/Com25-2.vue'
</script><template><div class="container"><h1>suspense 示例</h1><Suspense><div><Com25_1></Com25_1><Com25_2></Com25_2></div><!-- 在 #fallback 插槽中显示 “Loading...”  或者显示一个骨架屏 --><template #fallback>显示 Loading... 或者显示一个骨架屏幕</template></Suspense></div>
</template><style lang="scss" scoped>
.container {
}
</style>

组件 1 需要两秒才会执行完成

组件 2 网络请求图片执行时间 (根据网络速度和服务器响应)

只有当都完成请求时 才会正常显示内容。

效果:

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

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

相关文章

Ainx-V0.2-简单的连接封装与业务绑定

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d7;本文收录于Ainx系列&#xff0c;大家有兴趣的可以看一看 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列…

leetcode链表相关题目

文章目录 1.移除链表元素方法1&#xff1a;方法2 2.合并两个有序链表3.链表的中间节点方法1方法2 4.反转单链表方法1方法2 5.分割链表6.链表中的倒数第k个节点方法1&#xff1a;方法2: 7.环形链表的约瑟夫问题8.链表的回文结构9.相交链表方法1方法2&#xff1a; 10.环形链表11.…

专业课145+总分410+华南理工大学811信号与系统考研经验华工电子信息与通信,真题,大纲,参考书。

大家好&#xff0c;今年考研顺利上岸华南理工大学&#xff0c;专业课811信号与系统145&#xff08;只差一点满分&#xff0c;有点遗憾&#xff0c;专业我跟着Jenny老师复习投入时间和精力和数学差不多&#xff0c;华工专业课难度中等&#xff0c;是一个总分提高很好的突破口&am…

【JavaScript 漫游】【014】正则表达式通关

文章简介 JS 语言中的 RegExp 对象提供正则表达式的功能。本篇文章旨在对该对象的相关知识点进行总结。内容包括&#xff1a; 正则表达式概述RegExp 对象的实例属性RegExp 对象的实例方法字符串与正则表达式相关的实例方法正则表达式匹配规则 概述 正则表达式的概念 正则表…

第三节课[LangChain]作业

文章目录 前言实践搭建向量知识库 前言 本次作业虽然是第三节课作业&#xff0c;但是在第四次作业之后才完成&#xff0c;所以用的是经过自我认知微调的小助手权重。 使用**诡秘之主和宿命之环小说&#xff08;仅用于学习和研究&#xff09;**以及设定集、百度百科&#xff0c…

【开源】JAVA+Vue.js实现天然气工程业务管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…

414. Third Maximum Number(第三大的数)

题目描述 给你一个非空数组&#xff0c;返回此数组中第三大的数 。如果不存在&#xff0c;则返回数组中最大的数。 问题分析 注意要查找的数是数组中第三大的数&#xff0c;相同大小的数算一个&#xff0c;对于此问题可以采用先将数组排序然后查找第三大的数采用排序的方式最…

如何解决利用cron定时任务自动更新SSL证书后Nginx重启问题

利用cron定时任务自动更新SSL证书后&#xff0c;用浏览器访问网站&#xff0c;获取到的证书仍然是之前的。原因在于没有对Nginx进行重启。 据说certbot更新完成证书后会自动重启Nginx,但显然经我检测不是这回事儿。 所以我们需要创建一bash脚本&#xff0c;然后定时调用这个脚…

Vue核心基础5:数据监测、收集表单数据、过滤器

1 数据监测 【代码】 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>总结</title><scrip…

ChatGPT高效提问—prompt实践

ChatGPT高效提问—prompt实践 ​ 探索prompt在实际生活中的各种应用&#xff0c;旨在帮助理解和掌握如何将之前学到的prompt基础和技巧应用到具体实践中&#xff0c;从而在各个领域实现人工智能的价值。 ​ 通过生动的案例&#xff0c;发现并挖掘ChatGPT和prompt的无穷潜力。…

一个小而实用的 Python 包 pangu,实现在中文和半宽字符(字母、数字和符号)之间自动插入空格

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一个小巧的库&#xff0c;可以避免自己重新开发功能。利用 Python 包 pangu&#xff0c;可以轻松实现在 CJK&#xff08;中文、日文、韩文&#xff09;和半宽字符&#xff08;字母、数字和符号&#xf…

电路设计(15)——篮球赛24秒违例倒计时报警器的proteus仿真

1.设计要求 设计、制作一个篮球赛24秒违例倒计时报警器。要求&#xff1a; &#xff08;1&#xff09;具有倒计时功能。可完整实现从“24”秒开始依序倒计时并显示倒计时过程&#xff0c;显示时间间隔为1秒。 &#xff08;2&#xff09;具有消隐功能。当“24”秒倒计时…

nodejs切换版本

sudo n 18.17.0 sudo n然后键盘上下选择

PgSQL内核特性 - push-based pipeline 执行引擎

PgSQL内核特性 - push-based pipeline 执行引擎 数据库的SQL执行引擎负责处理和执行SQL请求。通常情况下&#xff0c;查询优化器会输出物理执行计划&#xff0c;一般由一系列的算子组成。当前&#xff0c;有两种算子流水线构建方式&#xff1a;1&#xff09;需求驱动的流水线&a…

AJAX——常用请求方法

1 请求方法 请求方法&#xff1a;对服务器资源&#xff0c;要执行的操作 2 数据提交 场景&#xff1a;当数据需要在服务器上保存 3 axios请求配置 url&#xff1a;请求的URL网址 method&#xff1a;请求的方法&#xff0c;GET可以省略&#xff08;不区分大小写&#xff09; …

防火墙安全策略及nat实验

要求一&#xff1a;生产区的设备在工作时间访问dmz区,仅可访问http服务器 要求二&#xff1a;办公区可以全天访问dmz区&#xff0c;其中10.0.2.20可以访问FTP服务器和HTTP服务器&#xff0c;10.0.2.10仅可以ping通10.0.3.10 要求三&#xff1a;办公区在访问服务器区时采用匿名认…

jsp课程教学管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 课程教学管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0…

【漏洞复现】狮子鱼CMS文件上传漏洞(wxapp.php)

Nx01 产品简介 狮子鱼CMS&#xff08;Content Management System&#xff09;是一种网站管理系统&#xff0c;它旨在帮助用户更轻松地创建和管理网站。该系统拥有用户友好的界面和丰富的功能&#xff0c;包括页面管理、博客、新闻、产品展示等。通过简单直观的管理界面&#xf…

基于LLM的业务流程自动化

在当今竞争激烈的商业环境中&#xff0c;业务流程&#xff08;尤其是文档处理工作流程&#xff09;的自动化对于寻求提高效率和减少人工错误的公司来说变得至关重要。 传统方法往往难以跟上任务的数量和复杂性&#xff0c;而人工主导的流程速度缓慢、容易出错&#xff0c;并且可…

零基础学编程从哪里入手,编程实例分享,配件进出库管理系统软件

零基础学编程从哪里入手&#xff0c;编程实例分享&#xff0c;配件进出库管理系统软件 一、前言 对于刚学编程的人来说&#xff0c;多看看现有的软件实例对自己学开发软件是很有帮助的。 下面分享的实例以配件进出库管理系统软件为例说明。 软件文件下载可以点击最下方官网…