背景

如下图中间tab页每个页面内容都很多，加载很慢，想要加载过程中添加占位内容增强用户体验

流程

父组件渲染

↓

触发异步组件加载（执行 loader）

↓

↓------------------ 如果加载时间 > delay（默认 200ms）------------------↓

↓ ↓

显示 loadingComponent（占位） ↓

↓ ↓

等待 loader 完成 →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→→ 加载完成 →→→ 替换为实际组件

实现

  import { defineAsyncComponent } from 'vue';
  import { AsyncLoading } from '@/components/AsyncLoading/index.js';

  // 异步加载组件
  export const loadAsyncComponent = (Loader) =>
    defineAsyncComponent({
      loader,
      loadingComponent: AsyncLoading,
      delay: 200,
    });