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
      ...
      }