Vue面试题36:什么是异步组件?(总结自B站up主‘前端杨村长’视频,仅供自用学习)
-
体验
-
在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件;
-
import { defineAsyncComponent } from 'vue'; const AsyncComp = defineAsyncComponent(() => { // 加载函数返回Promise return new Promise((resolve, reject) => { // 从服务器获取组件 resolve(/** 获取的组件 **/) }) }) // 借助打包工具实现ES模块动态导入 const AsyncComp = defineAsyncComponent(() => import("./components/MyComp.vue"))
-
-
思路
- 1.异步组件作用;
- 2.何时使用异步组件;
- 3.使用细节;
- 4.和路由懒加载的不同;
-
范例
- 1.在大型应用中,我们需要分割应用为更小的块,并且在需要组件时再加载它们;
- 2.我们不仅可以在路由切换时懒加载组件,还可以在页面组件中继续使用异步组件,从而实现更细的分割粒度;
- 3.使用异步组件最简单的方式是直接给
defineAsyncComponent
指定一个loader函数,结合ES模块动态导入函数import
可以快速实现。我们甚至可以指定loadingComponent
和errorComponent
选项从而给用户一个很好的加载反馈;另外Vue3中还可以结合Suspense
组件使用异步组件; - 4.异步组件容易和路由懒加载混淆,实际上不是一个东西。异步组件不能被用于定义懒加载路由上,处理它的是vue框架,而处理路由组件加载的是vue-router;但是可以在懒加载的路由组件中继续使用异步组件;
-
原理
-
defineAsyncComponent
是一个工厂函数,返回一个包装组件。包装组件根据加载器的状态(异步组件加载器或者异步组件定义)决定渲染什么内容 -
//源码 export function defineAsyncComponent< T extends Component = { new (): ComponentPublicInstance } >(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T { if (isFunction(source)) { source = { loader: source } } const { loader, loadingComponent, errorComponent, delay = 200, timeout, // undefined = never times out suspensible = true, onError: userOnError } = source ... }
-