Vue3 异步组件defineAsyncComponent

 简介

        在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能。

使用异步组件对应用进行优化

        当用户首次打开一个应用时，如果所有的页面都进行同步加载，会很影响首页的打开速度，此时我们可以使用异步加载的方式，不需要在首页中展示的内容可以配置为异步组件

        当应用中有一个超大超复杂的组件时，我们可以使用异步组件，在这个超大组件被渲染前，可以把它打包为一个很小的块，在需要时再去动态加载这个小块

        一个简单的小栗子，单文件中异步加载组件

<template>
  <div class="box">
    <div>这是一个需要单文件异步加载的组件</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: aquamarine;
}
</style>

<template>
  <div class="box">
    <div>异步组件加载失败</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(89, 105, 100);
}
</style>

<template>
  <div class="box">
    <div>异步组件加载中...</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(166, 243, 219);
}
</style>

<template>
  <div class="box">
    <div class="intro">在单文件中加载异步组件</div>
    <div class="btn" @click="importAsyncComponent">点击加载异步组件</div>
  </div>
</template>getCurrentInstance, 
<script setup>
import { defineAsyncComponent, ref } from 'vue'
import ErroComponent from './component/Error.vue'
import LoadingComponent from './component/Loading.vue'

// 单文件中异步加载组件
const AsyncComponent = defineAsyncComponent({
  // 加载函数
  loader: () => import('./component/index.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,

  // 展示加载组件前的延迟时间，默认为200ms,注：这里如果设置的时间过短，会有闪烁的效果
  delay: 200,

  // 加载失败后显示的组件
  errorComponent: ErroComponent,

  // 如果提供了一个timeout时间限制，并且超时了，也会展示这里的报错组件
  // 设置加载超时时间为3000毫秒
  timeout: 3000
})

const isImport = ref(false);
const importAsyncComponent = () => {
  console.log("点击加载异步组件");
  isImport.value = true;
}

</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 30px;
  background-color: antiquewhite;
}
.btn {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: orange;
}
.intro {
  margin: 30px;
  padding: 15px;
}
</style>

        以上四段代码分别对应了四个文件，需要异步加载的子组件、子组件加载错误时的页面，子组件加载中的loading页面，以及使用异步组件的父组件。

        一个小栗子，单文件中加载全局异步组件

<template>
  <div class="box">
    <div>这是一个需要全局异步加载的组件</div>
  </div>
</template>
<script setup>
</script>
<style scoped>
.box{
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 15px;
  background-color: rgb(51, 88, 76);
}
</style>

import { createApp, defineAsyncComponent } from 'vue'

const app = createApp(App)

// 配置全局异步组件
app.component('MyAsyncComponent', defineAsyncComponent(() => 
  import('./views/useAsyncComponent/globalImport.vue')
));

<template>
  <div class="box">
    <div class="intro">在单文件中加载全局异步组件</div>
    <div class="btn" @click="importGlobalAsyncComponent">点击加载异步组件</div>
    <MyAsyncComponent v-if="isImportGlobal"></MyAsyncComponent>
  </div>
</template>getCurrentInstance, 
<script setup>
import { defineAsyncComponent, ref } from 'vue'


// 单文件中加载全局异步组件
const isImportGlobal = ref(false);
const importGlobalAsyncComponent = () => {
  console.log("点击加载全局异步组件");
  isImportGlobal.value = true;
}

</script>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  margin: 20px;
  padding: 30px;
  background-color: antiquewhite;
}
.btn {
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: orange;
}
.intro {
  margin: 30px;
  padding: 15px;
}
</style>

        以上三个文件，以此为需要加载的全局异步组件、main函数、使用全局异步组件的vue文件。