持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情

前言

在我们开发大型项目的时候，为了更好的模块化，我们势必会项目拆分成很多块，也就是组件。而在我们加载某些页面的时候，为了提高加载速度，我们往往并不需要当前页面的所有组件加载出来，而是到使用到它的时候再进行相应的请求来得到组件。而为此，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
})

Vue组件入门（十五）异步组件

前言

异步组件

加载与错误状态