vue3使用8--等待异步操作时渲染（suspense，模拟和axios采集）

最新推荐文章于 2025-10-13 13:25:57 发布

原创

最新推荐文章于 2025-10-13 13:25:57 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何在Vue.js应用中使用Suspense组件进行异步组件加载，并结合axios实现从远程获取数据。通过设置网络模拟速度，展示了延迟加载的效果，同时提供了AsyncComponent和AsyncAddress组件的示例代码。

可以在chrome中选择网络模拟速度

1、测试1、模拟延迟测试

（1）主程序

<template>
  <h2>App父级组件：Suspense组件的使用</h2>
  <Suspense>
    <template #default>
      <!-- 异步组件 -->
        <async-component />
    </template>
    <template v-slot:fallback>
      <!-- loading的内容 -->
      <h2>Loading</h2>
    </template>
  </Suspense>

</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from "vue";
import AsyncComponent from "./AsyncComponent.vue";
//引入组件：静态引入和动态引入

//vue2中的动态引入组件的写法：在vue3中这种写法不行
// const AsyncComponent = () => import("./AsyncComponent.v