持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
前言
小伙伴们好，这是村长《Vue经典面试题源码级详解》系列文章第37题，前面已完成题目合集在此： 历时一个月，2.6W字！50+Vue经典面试题源码级详解，你值得收藏！
学习群
我组织了一个面试学习群，关注村长公众号村长学前端，回复“加群”，大家一起卷~
相关学习资源
本系列有配套视频，思维导图和开源项目，大家学习同时千万不要忘了三连 + 关注 + 分享，有道是喝水不忘挖井人~
- 视频教程：56道经典Vue面试题详解
- 思维导图：Vue面试专题
- 配套代码：vue-interview
37-异步组件是什么？使用场景有哪些？
分析
因为异步路由的存在，我们使用异步组件的次数比较少，因此还是有必要两者的不同。
体验
大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed.
import { defineAsyncComponent } from 'vue'
// defineAsyncComponent定义异步组件
const AsyncComp = defineAsyncComponent(() => {
// 加载函数返回Promise
return new Promise((resolve, reject) => {
// ...可以从服务器加载组件
resolve(/* loaded component */)
})
})
// 借助打包工具实现ES模块动态导入
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)
复制代码思路
- 异步组件作用
- 何时使用异步组件
- 使用细节
- 和路由懒加载的不同
范例
- 在大型应用中，我们需要分割应用为更小的块，并且在需要组件时再加载它们。
- 我们不仅可以在路由切换时懒加载组件，还可以在页面组件中继续使用异步组件，从而实现更细的分割粒度。
- 使用异步组件最简单的方式是直接给defineAsyncComponent指定一个loader函数，结合ES模块动态导入函数import可以快速实现。我们甚至可以指定loadingComponent和errorComponent选项从而给用户一个很好的加载反馈。另外Vue3中还可以结合Suspense组件使用异步组件。
- 异步组件容易和路由懒加载混淆，实际上不是一个东西。异步组件不能被用于定义懒加载路由上，处理它的是vue框架，处理路由组件加载的是vue-router。但是可以在懒加载的路由组件中使用异步组件。
知其所以然
defineAsyncComponent定义了一个高阶组件，返回一个包装组件。包装组件根据加载器的状态决定渲染什么内容。