vue3 异步组件

// Vue 3 异步组件示例代码

// 使用 defineAsyncComponent 定义异步组件
import { defineAsyncComponent } from 'vue';

// 方式一：使用 Promise
const AsyncComponent1 = defineAsyncComponent(() => 
  import('./components/MyComponent.vue')
);

// 方式二：带加载组件和错误处理
const AsyncComponent2 = defineAsyncComponent({
  // 加载组件时的异步函数
  loader: () => import('./components/MyComponent.vue'),

  // 可选的加载中组件
  loadingComponent: () => import('./components/LoadingComponent.vue'),
  // 加载超时时间 (ms)
  delay: 200,

  // 可选的错误组件
  errorComponent: () => import('./components/ErrorComponent.vue'),
  // 错误重试延迟 (ms)
  timeout: 8000,

  // 可选的错误重试函数
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      // 尝试重试最多 3 次
      retry();
    } else {
      // 超过 3 次后显示错误组件
      fail();
    }
  }
});

// 在模板中使用异步组件
<template>
  <div>
    <AsyncComponent1 />
    <AsyncComponent2 />
  </div>
</template>

<script>
export default {
  components: {
    AsyncComponent1,
    AsyncComponent2
  }
};
</script>

解释说明：

1. defineAsyncComponent：这是 Vue 3 中用于定义异步组件的 API。它接受一个返回 Promise 的工厂函数，该函数负责加载组件。

2. 方式一：简单的异步组件定义，直接通过 import() 动态导入组件。

3. 方式二：更复杂的异步组件定义，包含加载中组件、错误处理、超时设置和重试逻辑。

   • loader：异步加载组件的函数。
   • loadingComponent：在组件加载过程中显示的组件。
   • delay：延迟显示加载中组件的时间（毫秒）。
   • errorComponent：加载失败时显示的组件。
   • timeout：加载超时时间（毫秒），超过此时间将显示错误组件。
   • onError：错误处理函数，可以在加载失败时进行重试或显示错误信息。

4. 模板中使用：在模板中可以直接使用定义好的异步组件 <AsyncComponent1 /> 和 <AsyncComponent2 />。

这样可以有效地优化应用性能，特别是在大型应用中按需加载组件，减少初始加载时间。