5分钟了解Vue3 defineAsyncComponent - Vue3 的异步挂载

defineAsyncComponent 的具体功能

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

文章目录

• defineAsyncComponent 的具体功能
• 问题出处
• 一、defineAsyncComponent是什么？
• • 与vue2.0的不同
• 二、如何使用
• • 1.Demo
  • 2.应用场景
  • 3.使用时应注意
• 挖下来的坑: 如何加载远程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 解决

---

挖下来的坑: 如何加载远程vue文件

这里就要说一个最近比较火的骚操作"微前端" , 由于篇幅较大最近加班略微严重我会在j近期更新文章《手把手教你搭建微前端项目》

感兴趣的老哥们可以关注一下我这个新人博主, 你的三连或关注是对我更新文章最大的动力 !

看到这里, 如果你也有需要有需要笔者解决的技术或者架构问题, 欢迎随时私信或评论提出来, 我会在看到的第一时间回复, 同时会对比较有创意的问题及新的思路, 进行专题性的发文以解答, 感谢阅读!