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 不同了。变化主要有三点：
- 异步组件声明方法的改变：Vue 3.x 新增一个辅助函数defineAsyncComponent，用来显示声明异步组件;
- 异步组件高级声明方法中的 component 选项更名为loader；
- 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.使用时应注意
- 引入 defineComponent() 以正确推断 setup() 组件的参数类型
- defineComponent 可以正确适配无 props、数组 props 等形式
- defineComponent 可以接受显式的自定义 props 接口或从属性验证对象中自动推断
- 在 tsx 中，element-ui 等全局注册的组件依然要用 kebab-case 形式
- 在 tsx 中，v-model 要用 model={{ value, callback }} 写法
- 在 tsx 中，scoped slots 要用 scopedSlots={{ foo: (scope) => () }}写法
- defineComponent 并不适用于函数式组件，应使用 RenderContext 解决
挖下来的坑: 如何加载远程vue文件
这里就要说一个最近比较火的骚操作"微前端" , 由于篇幅较大最近加班略微严重我会在j近期更新文章《手把手教你搭建微前端项目》
感兴趣的老哥们可以关注一下我这个新人博主, 你的三连或关注是对我更新文章最大的动力 !
看到这里, 如果你也有需要有需要笔者解决的技术或者架构问题, 欢迎随时私信或评论提出来, 我会在看到的第一时间回复, 同时会对比较有创意的问题及新的思路, 进行专题性的发文以解答, 感谢阅读!
