defineAsyncComponent 的具体功能

在使用vue-cli构建项目，在默认情况下，执行 npm run build/yarn build会将所有的js打包成一个整体，vue为单页面应用，同步加载大量的页面代码会导致页面长时间处于空白情况。
使用该方法来异步加载所需页面来提升加载速度。
此适用于项目比较大的情况下，如果就只有几个页面的情况，不建议使用该功能

文章目录

问题出处

上班摸鱼在技术群聊里的时候偶然看到一位前端老哥提出的问题:带给内容是想把远端vue文件动态的引入进项目



老哥第一时间想到了用3.0新增的defineAsyncComponent 来解决这个问题, 但该方法进适用于加载本地vue文件, 具体如何解决老哥的需求我们放到下篇文章来说
我们先来解决老哥弟第二个问题, defineAsyncComponent到底是个什么, 具体怎么用.

一、defineAsyncComponent是什么？

defineAsyncComponent可以接受一个加载器函数，该函数将承诺解析返回给实际的组件。
如果解析后的值是ES模块，则模块的默认导出将自动用作组件。

与vue2.0的不同

Vue 3.x 中，对异步组件的使用跟 Vue 2.x 不同了。变化主要有三点：

1. 异步组件声明方法的改变：Vue 3.x 新增一个辅助函数defineAsyncComponent，用来显示声明异步组件;
2. 异步组件高级声明方法中的 component 选项更名为loader；
3. loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise；

辅助函数defineAsyncComponent

二、如何使用

1.Demo

基础示例

import { defineAsyncComponent } from "vue"// simple usage
 const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))// with options
 const AsyncFooWithOptions = defineAsyncComponent({loader: () => import("./demo.vue"),loadingComponent: LoadingComponent,errorComponent: ErrorComponent,delay: 200,timeout: 3000
 })
 

根据RFC-0008：渲染功能API更改中引入的更改，现在在Vue 3中将普通功能视为功能组件。现在必须通过API方法显式定义异步组件。

import { defineAsyncComponent } from "vue"// simple usage
 const AsyncFoo = defineAsyncComponent(() => import("./demo.vue"))

defineAsyncComponent可以接受一个加载器函数，该函数将承诺解析返回给实际的组件。

2.应用场景

对于多页面项目异步加载组件或页面, 达成加快加载速度的目的.

3.使用时应注意

1. 引入 defineComponent() 以正确推断 setup() 组件的参数类型
2. defineComponent 可以正确适配无 props、数组 props 等形式
3. defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
4. 在 tsx 中，element-ui 等全局注册的组件依然要用 kebab-case 形式
5. 在 tsx 中，v-model 要用 model={{ value, callback }} 写法
6. 在 tsx 中，scoped slots 要用 scopedSlots={{ foo: (scope) => () }}写法
7. defineComponent 并不适用于函数式组件，应使用 RenderContext 解决