当前位置：首页 > article >正文

Vue3中SuspensedefineAsyncComponent异步组件的应用场景。

article 2025/3/29 11:57:22

文章目录

一、Suspense&defineAsyncComponent 是什么？
二、应用场景
- 1.创建异步组件
- 2.创建一个普通组件
- 3.模拟请求json数据
- 4.使用Suspense模拟加载数据中loading效果
总结

一、Suspense&defineAsyncComponent 是什么？

是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能：

二、应用场景

1.创建异步组件

有人不明白，为啥这个就是个异步组件呢？
下面我来解释下，参考Vue官方文档如下：
在这里插入图片描述

在这里插入图片描述

 // 代码参考示例
<template>
    <div class="user-profile">
        <el-table :data="data" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
  </template>
   
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import axios from 'axios'
   
  const tableData = ref([]);

const {data} =  await axios.get('./data.json');
console.log(data);
  </script>

2.创建一个普通组件

在这里插入图片描述

代码如下（示例）：

<template>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  const loading = ref(true)
  
  const tableData = [
    {
      date: '2016-05-02',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-04',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
      date: '2016-05-01',
      name: 'John Smith',
      address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
  ]
  </script>
  
  <style>
  body {
    margin: 0;
  }
  .example-showcase .el-loading-mask {
    z-index: 9;
  }
  </style>

3.模拟请求json数据

执行pnpm in axios 安装axios库进行请求json数据
在这里插入图片描述

[
    {
        "date": "2016-05-02",
        "name": "John Smith",
        "address": "No.1518, Jinshajiang Road, Putuo District"
    },
    {
        "date": "2016-05-04",
        "name": "John Smith",
        "address": "No.1518, Jinshajiang Road, Putuo District"
    },
    {
        "date": "2016-05-01",
        "name": "John Smith",
        "address": "No.1518, Jinshajiang Road, Putuo District"
    }
]

4.使用Suspense模拟加载数据中loading效果

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

<script setup lang="ts">
  import AsyncCom from './components/SsyncCom.vue'
  import { ref, onMounted ,defineAsyncComponent  } from 'vue'
  // 使用defineAsyncComponent来引入异步组件
  const SyncCom = defineAsyncComponent(() => import('./components/SsyncCom.vue'))
  // 引入普通组件
  import tCom from './components/TCom.vue'
</script>
<template>
  <!-- 使用Suspense组件 -->
  <Suspense>
    <!-- 展示异步组件 -->
    <template #default>
      <SyncCom />
    </template>
    <!-- 异步组件加载过程中时展示的加载组件 -->
    <template #fallback>
      <tCom></tCom>
  </template>
  </Suspense>
</template>
<style scoped>

</style>