什么是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... 的效果

参考

vue3-doc-async-components