前言
在我们开发大型项目的时候，为了更好的模块化，我们势必会项目拆分成很多块，也就是组件。而在我们加载某些页面的时候，为了提高加载速度，我们往往并不需要当前页面的所有组件加载出来，而是到使用到它的时候再进行相应的请求来得到组件。而为此，vue提供了defineAsyncComponent方法来解决我们的问题，也就是异步组件。下面就让我们来看一看。
异步组件
defineAsyncComponent接受一个返回promise的函数。
import { defineAsyncComponent } from 'vue' const AsyncCom = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // 请求服务器获取的组件 resolve(/* 获取到的组件 */) }) }) // AsyncCom可以像其他组件一样正常使用 复制代码
我们可以看到promise中，通过向resolve回调方法传递一个组件来进行调用。当然我们也可以通过reject来提示加载失败。而正好ES模块动态导入返回的也是一个promise，所以我们把二者搭配起来使用。
import { defineAsyncComponent } from 'vue' const AsyncCom = defineAsyncComponent(() => import('./components/MyComponent.vue') ) 复制代码
如上，我们得到的asyncCom便是一个包装过的异步组件，他只有在页面中要渲染到他的时候才会加载内部的组件。而他对props和插槽等也会传递给内部组件，完全可以做到无差别替换原始组件，实现延迟加载。
既然能原始组件一样使用，那他当然也可以进行全局注册，更好的提升项目的性能:
app.component('MyComponent', defineAsyncComponent(() => import('./components/MyComponent.vue') )) 复制代码
加载与错误状态
当然，既然是异步组件加载状态，以及加载错误这些我们都是可以在defineAsyncComponent中进行处理的：
const AsyncCom = defineAsyncComponent({ // 加载函数 loader: () => import('./Title.vue'), // 加载异步组件过程中时使用的组件 loadingComponent: LoadingCom, // 展示加载组件前的延迟时间，默认为 200ms delay: 200, // 加载失败后展示的组件 errorComponent: ErrorCom, // 加载组件超时也会显示配置的报错组件，默认值是：Infinity timeout: 3000 })
