在我们日常开发中,有些组件里面加载非常慢,导致我们路由跳转的时候回出现卡顿情况。
这个时候我们可以使用异步组件。
Suspense
IconParkSelect 组件因为要读取文件,会有点慢,所以只用异步的方式加载。
<Suspense>
<IconParkSelect
v-model="currentSelectIcon"
:visible="iconVisible"
@close="closeIconFormModalVisible"
@cancel="closeIconFormModalVisible"
@ok="insertIconToItem"
/>
<!-- 在 #fallback 插槽中显示 "正在加载中" -->
<template #fallback> Loading...</template>
</Suspense>
Suspense 有两个插槽,当异步组件没有加载完成时候会先选择 fallback 插槽数据。
然后使用异步的方式引入组件。
import { defineAsyncComponen } from 'vue';
// 异步获取图标库
const IconParkSelect = defineAsyncComponent(
() => import('@/components/common/IconParkSelect.vue')
);