Vue3 Suspense 和 defineAsyncComponent 结合使用方法

Suspense：用于协调对组件树中嵌套的异步依赖的处理。

defineAsyncComponent：定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。

异步组件的好处：使用 import() 函数式模式引入的组件，打包的时候都会做一个代码拆解，会打包成单独的文件，而不会打包到主包中，当使用的时候在进行加载，这样可以减少首屏加载时间，优化用户体验。

异步组件 HomeView.vue：

<script setup lang="ts">
  // 这里模拟异步方法
  await new Promise((resolve)=>{
    setTimeout(() => {
      resolve('接口返回成功')
    }, 1000);
  })
</script>
 
<template>
  <div>
    我是异步组件
  </div>
</template> 

页面默认显示 “加载中...” ，当异步组件的异步方法返回成功，页面显示异步组件的内容，代码如下：

<script setup lang="ts">
  import { defineAsyncComponent } from "vue";
  const HomeView=defineAsyncComponent(()=>import('./views/HomeView.vue'))
</script>
 
<template>
  <Suspense>
    <template #default>
      <HomeView></HomeView>
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

上述案例可用于实现大型项目的骨架屏效果，提升用户体验。