Vue3——Suspense组件

Suspense组件

官网中有提到他是属于实验性功能：
<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。
<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。

意思就是此组件用来等待异步组件时渲染一些额外内容，让应用有更好的用户体验

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

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

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

有了 <Suspense> 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层展示出加载中或加载失败的状态。
接下来看个简单的例子：
首先需要引入异步组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

简洁一些就是用组件实现异步的加载的这么一个效果
Home父组件代码如下：

<template><div class="home"><h3>我是Home组件</h3><Suspense><template #default><Child /></template><template v-slot:fallback><h3>Loading...</h3></template></Suspense></div>
</template><script >
// import Child from './components/Child'//静态引入
import { defineAsyncComponent  } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {name: "",components: { Child },
};
</script><style>
.home {width: 300px;background-color: gray;padding: 10px;
}
</style>

自组件Child

<template><div class="child"><h3>我是Child组件</h3>name: {{user.name}}age: {{user.age}}</div>
</template><script>
import { ref } from "vue";
export default {name: "Child",async setup() {const NanUser = () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve({name: "NanChen",age: 20,});},2000);});};const user = await NanUser();return {user,};},
};
</script><style>
.child {background-color: skyblue;padding: 10px;
}
</style>

根据插槽机制,来区分组件, #default 插槽里面的内容就是你需要渲染的异步组件; #fallback 就是你指定的加载中的静态组件。

效果如下：

Vue3——Suspense组件相关推荐

vue3新增Suspense组件
在开始介绍 Vue 的 Suspense 组件之前,我们有必要先了解一下 React 的 Suspense 组件,因为他们的功能类似. React 16.6 新增了组件,让你可以"等待&q ...
vue3.0学习笔记 (suspense组件 defineAsyncComponent异步引入)
通过defineAsyncComponent异步引入 <template><div><Suspense>// 这两个插槽名称是固定的// defalut:这里面写的 ...
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
Vue3动态绑定组件警告处理
Vue received a Component which was made a reactive object. This can lead to unnecessary performance ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
VUE3祖孙组件传值调用方法
VUE3祖孙组件传值调用方法父子组件传参可以通过 props 和 emit 来实现,但是当组件的层次结构比较深时,props 和 emit 就太繁琐了.vue为了解决这个提出了 provide / ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
vue3父组件调用子组件的方法
东风vue3父组件调用子组件的方法是通过expose和ref来实现的,我们可以通过expose来控制父组件可以访问子组件那些的方法和对象,我们将通过setup api(组合式 api)和option ...

Vue3——Suspense组件

Suspense组件

Vue3——Suspense组件相关推荐

最新文章

热门文章