Vue3中的异步组件defineAsyncComponentAPI的用法示例

介绍

当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；

这样的做得目的可以很好的提高用户体验。

为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型。

简单示例

<div class="label">关键字</div>
  <Suspense>
      <template #default>
        <Cascader v-model:keyword="keyWord"></Cascader>
      </template>
      <template #fallback>
          loading...
      </template>
  </Suspense>
</div>

<script setup>
// 导入组件
const Cascader = defineAsyncComponent(() => import('./Cascader'))
</script>

先加载父组件，异步组件先用简单元素代替

之后加载异步组件

异步组件Suspense