Suspense组件是Vue3中的知名功能之一。
它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验。
值得庆幸的是,Suspense组件非常容易理解,它们甚至不需要任何额外的导入!
可以解决异步请求的困境; Suspense是Vue3推出的一个内置的特殊组件; 如果使用Suspense,需要返回一个Promise
本文主要是展示一哈加载多个异步组件的场景,遇到不稳定问题,及解决方法(加载单个,只需要引入单个组件即可)
创建第一个组件:
AsyncShow
<!--
* @Description: Suspense - 异步请求好帮手
* @Author: Rulyc
* @Operating:
-->
<template>
<h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: "10_AsyncShow",
setup() {
/** 需要返回一个Promise, 使用Suspense */
return new Promise((resolve) => {
setTimeout(()=>{
return resolve({
result: 42
})
}, 3000)
})
}
})
</script>
使用 async await , 新建一个 10_AsyncShow_Img组件
<template>
<img :src="result && result.url" alt="">
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'
export default defineComponent({
name: "10_AsyncShow",
async setup() {
const rawData = await axios.get('https://images.dog.ceo/breeds/terrier-irish/n02093991_4404.jpg')
return {
result: rawData.config
}
}
})
</script>
app中:(自行引入两个组件,然后使用如下图中)
警告中说:是一个实验性的特性,它的API很可能会改变slots,除非只有一个根节点。在
故而这里目前应该暂时展示一个根节点(之前的版本中,是可以展示多个异步组件作为根节点的; 以后版本未确定,还不够稳定)
解决这个问题,初步采用了增加一个div包裹(即增加一个根节点)
<Suspense>
<template #default>
<div>
<AsyncShow></AsyncShow>
<AsyncShowImg></AsyncShowImg>
</div>
</template>
<template #fallback>
<div>
Loading... ---- 异步加载中
</div>
</template>
</Suspense>
在4.5.8版本中,是需要增加一个根节点的。目前博主使用的是4.5.8; 之前的版本貌似是不用增加一个根节点。
补充:
单个组件及template上属性说明如下图: