什么是Suspense
Suspense组件可以等待某个异步组件解析完成的前后的显示情况
比如一个组件是图片,它里面是图片资源是网络请求过来的,我们就能使用Suspense 展示在这个请求未完成的情况下展示的另外一种样式。
使用方式
这个组件有两个具名插槽
default - 默认的插槽。可以放置异步的组件
fallback - 可以放置组件未加载前的样式 比如 loading
例子
AsyncComponent.vue
这是一个异步的组件
<template>
<div>
<img :src="result.message" alt="">
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from "axios";
export default defineComponent({
name: 'AsyncComponent',
async setup() {
const imgData = await axios.get('https://dog.ceo/api/breeds/image/random')
return {
result: imgData.data
}
}
});
</script>
SuspenseLearn.vue
这是学习Suspense的页面
<template>
<div>
<Suspense>
<template #default>
<div>
<async-component></async-component>
</div>
</template>
<template #fallback>
<h1>Loading...</h1>
</template>
</Suspense>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AsyncComponent from '@/components/AsyncComponent.vue'
export default defineComponent({
name: 'Suspense',
components: {
AsyncComponent
},
setup() {
return {
}
}
});
</script>
效果
上述就会在异步组件未加载完毕前,展示 Loading... 的效果
网友评论