Vue3中的Suspense异步加载

　　一、简述

　　Suspense 是 vue3 中新增的组件，类似于 keep-alive 不需要任何的引入，可以直接进行使用。自带两个 slot 分别为 default、fallback。当要加载的组件不满足状态时,Suspense 将回退到 fallback状态一直到加载的组件满足条件，才会进行渲染。Suspense在等待异步组件时额外渲染一些内容，使用户拥有更好的体验，比如说

• 在页面加载之前显示加载动画
• 显示占位符内容
• 处理延迟加载的图像

　　二、配合setup使用

　　　　下边在父组件中引入子组件，在子组件未请求回数据时先加载loading,之后再展示列表

parent.vue

template>
  <div>
    <Suspense>
      <template #default>
        <Child />
      </template>
      <template #fallback>Loading ...</template>
    </Suspense>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from "vue";
//借助defineAsyncComponent动态引入
const Child = defineAsyncComponent(() => import("./child.vue"));
</script>

child.vue

<template>
  <div>
    <ul>
      <li v-for="item in jsonData" :key="item.name">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {//模拟异步请求
      resolve([
        {
          name: "张三",
          age: 15,
        },
        {
          name: "李四",
          age: 17,
        },
      ]);
    }, 1000);
  });
}

ref: jsonData = await fetchData();
</script>

 

　　三、配合路由使用

　　　配合路由使用,当未加载完毕时不显示 router-view，而是渲染 fallback的 内容，全局增加 loading 的处理

<router-link to="/home">Home</router-link>|
<router-link to="/about">About</router-link>
<Suspense>
  <template #default>
    <router-view />
  </template>
  <template #fallback>
    <div class="loading"></div>
  </template>
</Suspense>