vue3中的Suspense

1、Suspense作用

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

2、使用步骤

使用步骤：

• 异步引入组件

  import {defineAsyncComponent} from 'vue'
  const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

• 使用Suspense包裹组件，并配置好default 与 fallback 

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>

• 其中 fallback是由于网速或者其他原因没有加载成功时显示的组件，当加载成功后显示default（default 与 fallback 不可改名，因为Suspense相当于定义好的slot具名插槽）

3、 Suspense搭配async函数的setup

代码：

App.vue（异步加载组件的父组件）

<template>
  <div class="app">
    <h3>我是App组件</h3>
    <Suspense>
      <template v-slot:default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h3>稍等，加载中...</h3>
      </template>
    </Suspense>
  </div>
</template>

<script>
// import Child from './components/Child'//静态引入
import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("./components/Child")); //异步引入
export default {
  name: "App",
  components: { Child },
};
</script>

<style>
.app {
  background-color: gray;
  padding: 10px;
}
</style>

定义setup为async的组件Child.vue

<template>
  <div class="child">
    <h3>我是Child组件</h3>
    {{ sum }}
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Child",
  async setup() {
    let sum = ref(0);
    let p = new Promise((resolve) => {
      setTimeout(() => {
        resolve({ sum });
      }, 3000);
    });
    return await p;
  },
};
</script>

<style>
.child {
  background-color: skyblue;
  padding: 10px;
}
</style>

 结果分析：

参考链接：

 https://www.bilibili.com/video/BV1Zy4y1K7SH?p=167