27.vue3学习篇-如何使用异步组件

在 Vue 3 中，异步组件是一种强大的工具，可以实现按需加载和优化应用的性能。

一、定义异步组件的基本方式

使用defineAsyncComponent函数来定义异步组件。

<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);
</script>

<template>
  <AsyncComponent />
</template>

这里，当这个组件被渲染时，Vue 会异步地加载./AsyncComponent.vue这个模块。

二、配置加载选项

defineAsyncComponent函数可以接收一个对象作为参数，用于配置加载行为。

1.设置加载中的组件：在异步加载过程中，可以显示一个加载中的组件，给用户一个反馈。

   import LoadingComponent from './LoadingComponent.vue';

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./AsyncComponent.vue'),
     loadingComponent: LoadingComponent
   });

2.设置加载错误时的组件：

如果加载出现错误，可以显示一个错误提示组件。

   import ErrorComponent from './ErrorComponent.vue';

   const AsyncComponent = defineAsyncComponent({
     loader: () => import('./AsyncComponent.vue'),
     errorComponent: ErrorComponent
   });

3.设置延迟加载时间和超时时间：

• delay属性可以设置延迟加载的时间（以毫秒为单位），在这个时间之后才开始加载异步组件。
• timeout属性可以设置超时时间，如果在这个时间内异步组件没有加载成功，就会触发错误处理。

     const AsyncComponent = defineAsyncComponent({
       loader: () => import('./AsyncComponent.vue'),
       delay: 500, // 延迟 500 毫秒加载
       timeout: 10000 // 10 秒超时
     });

三、动态加载异步组件

可以根据条件动态地加载不同的异步组件。

<script setup>
import { ref } from 'vue';

const componentName = ref('AsyncComponent1');

const loadComponent = async () => {
  const component = await import(`./${componentName.value}.vue`);
  return defineAsyncComponent(() => component);
};

const DynamicComponent = await loadComponent();
</script>

<template>
  <DynamicComponent />
</template>

在这个例子中，根据componentName的值动态地加载不同的异步组件。

四、完整的异步组件代码

// 以下是一个在 Vue 3 中使用异步组件的完整代码示例：

// App.vue：


<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <AsyncComponent v-if="showAsyncComponent" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AsyncComponent from './AsyncComponent.vue';
import LoadingComponent from './LoadingComponent.vue';
import ErrorComponent from './ErrorComponent.vue';

const showAsyncComponent = ref(false);

const toggleComponent = () => {
  showAsyncComponent.value =!showAsyncComponent.value;
};

const asyncComp = defineAsyncComponent({
  loader: () => import('./AsyncComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent
});
</script>

// AsyncComponent.vue：

<template>
  <div>
    This is the async component.
  </div>
</template>

在这个示例中：

• 在App.vue中，使用defineAsyncComponent函数来定义异步组件AsyncComponent。这个函数接受一个返回 Promise 的函数，通常是通过动态导入的方式来加载组件文件。
• 当应用运行时，Vue 会在需要渲染AsyncComponent时才去加载对应的.vue文件，从而提高初始加载速度。