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

作者：Augus

2022-11-03
天津
本文字数：874 字
阅读完需：约 3 分钟

前言

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

复制代码

发布于: 刚刚阅读数: 7

原文链接:【http://xie.infoq.cn/article/323ccba5fb33c98dff4c28455】。文章转载请联系作者。

Augus

关注

爱瞎搞的软件开发工程师 2021-06-10 加入

某摸鱼集团

发布

暂无评论

创作场景

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

前言

异步组件

加载与错误状态

Augus

评论