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>

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