📚前端面试题速记
Q4
★ ★ ★ ★ ★

Vue 3 如何实现组件的懒加载？

⚡ 速记答案（30 秒）

使用：defineAsyncComponent(() => import('./Comp.vue'))。实际是把组件打成独立 chunk，真正渲染到它时才触发动态 import。

📖 详细讲解

标准面试回答（推荐记住）

Vue 3 通过 defineAsyncComponent 配合动态 import 实现组件懒加载。构建工具会把异步组件打成独立 chunk，只在组件真正渲染时才加载。可以配合 Suspense 处理加载状态，还支持 loading、error 等选项。

懒加载实现原理

核心 API: defineAsyncComponent

它是一个高阶函数，接收一个加载器函数（返回 Promise），返回一个包装组件。

工作流程：

  1. 初始渲染：渲染占位符（或 loading 组件）
  2. 触发加载：调用 loader() 开始网络请求
  3. 加载完成：
    • 成功：替换为实际组件
    • 失败：显示 error 组件（如果配置了）

代码分割 (Code Splitting)：
依赖打包工具（Vite/Webpack）对 dynamic import (import()) 的支持，自动将组件代码分割成独立的 JavaScript chunk。

配置选项详解

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  loadingComponent: LoadingComponent,
  delay: 200, // loading 显示前的延迟
  errorComponent: ErrorComponent,
  timeout: 3000 // 加载超时时间
})

✅ 面试要点

  • •掌握 defineAsyncComponent 的用法
  • •理解代码分割的原理
  • •知道如何处理加载状态和错误

💻 代码示例

组件懒加载
import { defineAsyncComponent } from 'vue'

// 基础用法
const AsyncComp = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

// 高级配置
const AsyncCompWithOptions = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,  // 延迟显示 loading
  timeout: 3000 // 超时时间
})