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

最新推荐文章于 2025-03-23 00:45:00 发布

萍宝贝

最新推荐文章于 2025-03-23 00:45:00 发布

阅读量1.6k

点赞数 14

本文链接：https://blog.youkuaiyun.com/qq_34334992/article/details/141712558

版权

在 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: LoadingC