Vue3尝鲜之Suspense异步组件(踩坑)

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上属性说明如下图：