Vue3之异步组件(学习笔记)

核心概念与使用方式

定义异步组件

• defineAsyncComponent函数（Vue3推荐方式)
  定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。

import { defineAsyncComponent } from 'vue';
const AsyncCom = defineAsyncComponent(() => import('./MyComponent.vue'));
// 具体配置
const AsyncComp = defineAsyncComponent({
    loader: () => import('./MyComponent.vue'),
    loadingComponent: loadingSpinner,  // 加载中组件
    errorComponent: ErrorDisplay,      // 错误组件
    delay: 1000,                       // 延迟显示loading（防闪烁）
    timeout,                           // 超时时间        
})

异步组件的核心作用

• 按需加载：减少初始包体积，提升首屏加载速度
• 性能优化：结合代码分割（Code Spliting）动态加载非关键组件

应用场景

• 大型应用模块懒加载：如管理后台的复杂表单/图表组件
• 条件渲染组件：用户交互后才加载的非必要组件（如弹窗）
• 路由级懒加载：结合Vue Router提升首屏性能

Suspense和异步组件的关系

Suspense：内置组件，用于统一管理异步组件的加载状态（如多个异步组件并行加载）
异步组件：通过defineAsyncComponent定义，由Suspense控制占位内容

<template>
  <Suspense>
    <template #default>
      <AsyncComp />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

如何实现组件加载失败后的重试逻辑

工厂函数返回Promise：在loader中捕获错误并重试

const Async = defineAsyncComponent({
    loader: () => import('./MyComponent.vue')
        .catch(() => {
            // 重试逻辑
            return retryImport();
        })
})

异步组件在路由懒加载中的应用

Vue Router配置：

const router = createRouter({
    route: [{
        path: '/profile',
        component: () => import('./Profile.vue'); // 直接动态导入
        // 或使用defineAsyncComponent
        component: defineAsyncComponent(() => import('./Profile.vue')) 
    }]
})

Vue3异步组件与Vue2的差异

• 语法差异：Vue3废弃Vue.component('async-comp',() => import(...))，改用defineAsyncComponent
• 功能增强：Vue3支持更细颗粒度的加载状态管理和Suspense集成

代码实例

// 异步组件定义
const AsyncModal = defineAsyncComponent({
    lodaer: () => import('./Modal.vue').catch((err) ==> {
        console.log('加载失败，3s后重试...');
        return new Promise(resolve => {
            setTimeout(() => resolve(import('./Modal.vue')), 3000);
        })
    }),
    loadingComponent: LoadingSpainner,
    delay: 200,
    timeout: 5000
});
// 在组合式API中使用
export default {
    setup() {
        const showModal = ref(false);
        return { showModal, AsyncModal };
    }
}

参考文章：https://juejin.cn/post/7511568225987051555#heading-73