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>
上述案例可用于实现大型项目的骨架屏效果,提升用户体验。