VUE3.0实验性内置组件Suspense用法

前言：

<Suspense> 是一个内置组件，可以在等待异步组件加载时，额外渲染一个加载状态。

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

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

2. 异步组件。

现在有父组件，在两个子组件未加载完毕时显示loading，那该如何去做呢？

首先子组件AsyncShow：使用了promise包裹代码

<template>
  <div>
    <h1>{{ result }}</h1>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
   return new Promise((resolve) => {
    setTimeout(() => {
      return resolve({
        result: 2
      })
    }, 3000)
   })
  },
})
</script>

子组件DogShow代码：使用了async await

<template>
  <div>
    <img :src="rowData && rowData?.data.message" alt="">
  </div>
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent } from 'vue'

export default defineComponent({
  async setup() {

    const rowData = await axios.get('https://dog.ceo/api/breeds/image/random')
    return {
      rowData
    }
  },
})
</script>

以上promise 和 async都可以达到效果

父组件引入，suspense包裹这两个组件，然后用fallback插槽渲染子组件未加载完毕时候的内容

<template>
    <Suspense>
        <div>
          <AsyncShow></AsyncShow>
          <DogShow></DogShow>
        </div>
         <!-- 在 #fallback 插槽中显示 “Loading...” -->
        <template #fallback>
          Loading...
        </template>
  </Suspense>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import AsyncShow from './components/AsyncShow.vue';
import DogShow from './components/DogShow.vue';
export default defineComponent({
  setup() {
    return {}
  },
})
</script>

效果如下：

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