vue中的Suspense和defineAsyncComponent

Suspense

Suspense是一个在异步组件加载时展示占位内容的特性。它可以使得在异步加载数据时更加方便和简单，并且提高用户体验。

<Suspense> 组件有两个插槽：#default 和 #fallback。两个插槽都只允许一个直接子节点。在可能的时候都将显示默认槽中的节点。否则将显示后备槽中的节点。

在组件加载完成之前，可以在Suspense中设置fallback属性，展示一些占位内容（例如加载中的动画）。当异步组件加载完成后，会自动替换掉fallback中的占位内容，显示实际内容。

defineAsyncComponent

defineAsyncComponent用于定义异步组件。与createAsyncComponent不同的是，defineAsyncComponent更加灵活，可以自定义加载异步组件的逻辑。

具体来说，我们可以使用defineAsyncComponent来创建一个返回异步组件的工厂函数，该函数在调用时才会开始加载异步组件

defineAsyncComponent返回的是一个函数，而不是一个组件选项对象。因此，在使用defineAsyncComponent定义异步组件时，需要将返回值作为组件的选项对象进行注册或传递给其他组件。
示例代码如下：

HomeComp:

<template>
  <div>
    <h1>这是首页啦</h1>
    <ul>
      <li >香蕉  </li>
      <li >苹果  </li>
    </ul>
  </div>
</template>

<script setup>

</script>

<style scoped></style>

Home.vue:

<template>
  <!--Suspense异步组件  -->
  <suspense>
    <template #fallback>
         <!--网速不好情况下的加载动画  -->
      <div class="loading"><Loading /></div>
    </template>
    <template #default>
      <h3><AsyncHome /></h3>
    </template>
  </suspense>
</template>

<script setup>
   
import Loading from "../components/Loading.vue";
import { defineAsyncComponent } from "vue";
let AsyncHome = defineAsyncComponent(() => {
  return import("../components/HomeCom.vue"); // 返回一个Promise
});
</script>

<style lang="scss" scoped></style>

在上面的代码中，我们首先引入了defineAsyncComponent然后，我们使用defineAsyncComponent创建了异步组件AsyncHome，在suspense中使用了AsyncHome作为默认插槽的内容，同时设置了fallback属性，展示Loading组件作为占位内容。当AsyncHome加载完成后，会自动替换掉Loading组件，显示AsyncHome的实际内容。

需要注意的是，在使用Suspense时，只能有一个默认插槽，否则会抛出警告。另外，fallback属性必须包含至少一个节点，否则也会抛出警告。