什么是异步组件

个人理解 ：异步组件 就是在用到这个组件的时候再进行加载，而不是 一上来就全部加载完成。即用即取的一个思想。

异步组件中使用到的方法 ：
defineAsyncComponent () 方法 ： 返回一个Promise 对象;
我们在开发过程中常用到的语法格式如下：

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>import('./components/MyComponent.vue')
)

异步组件的使用案例

子组件

<template><!-- 子组件 --><div class="childdiv">子组件 - msg : {{ msg }}<br></div></template><script setup lang="ts">// 引入 inject 方法import { ref } from 'vue'// 声明一个变量const msg = ref('这是子组件的msg变量')</script><style scoped>.childdiv{width: 350px;border: 1px solid green;}</style>

父组件

<template><div class="basediv">APP.vue 中的 msg : {{ msg }}<br>  <!-- 引入子组件 : 异步加载的组件 ： 使用方式与普通组件一致 --><ChildComponent /></div></template><script setup lang="ts">// 引入 provide 方法import { ref,defineAsyncComponent } from 'vue'// 常规引入子组件// import ChildComponent from './ChildComponent.vue';// 动态引入子组件const ChildComponent  = defineAsyncComponent( () => import ('./ChildComponent.vue'))// 声明父组件的一个变量const msg = ref('这是父组件的msg变量')</script><style scoped>.basediv{width: 600px;height: 400px;border: 1px solid red;}
</style>

运行效果：

高级的写法（了解一下）

以下代码是官网给出的 案例，可以参考一下

const AsyncComp = defineAsyncComponent({// 加载函数loader: () => import('./Foo.vue'),// 加载异步组件时使用的组件loadingComponent: LoadingComponent,// 展示加载组件前的延迟时间，默认为 200msdelay: 200,// 加载失败后展示的组件errorComponent: ErrorComponent,// 如果提供了一个 timeout 时间限制，并超时了// 也会显示这里配置的报错组件，默认值是：Infinitytimeout: 3000
})