当前位置：首页 > news >正文

前端流行框架Vue3教程：26. 异步组件

news 来源：原创 2025/5/26 8:14:44

26. 异步组件

在这里插入图片描述

根据上节课的代码，我们在切换到B组件的时候，发现并没有网络请求：
在这里插入图片描述

异步组件：

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能

我们继续用上节课的代码修改下：

<script>
// 导入组件A
import ComponentA from "./components/ComponentA.vue"import {defineAsyncComponent} from "vue";// 定义一个异步组件 ComponentB
// 使用 defineAsyncComponent 来懒加载组件，以提高应用的性能
// 当组件实际需要渲染时，才会加载对应的组件文件
const ComponentB = defineAsyncComponent(() =>import("./components/ComponentB.vue")
)
export default {data() {return {tabComponent: 'ComponentA'}},components: {ComponentA,ComponentB}, methods: {changeHandle() {this.tabComponent = this.tabComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA'}}
}
</script>
<template><!-- 使用 keep-alive 组件来缓存动态组件，避免重复渲染 --><keep-alive><component :is="tabComponent"></component></keep-alive><button @click="changeHandle">切换组件</button>
</template>

这个时候，我们切换B组件的时候，就看到了网络请求：

在这里插入图片描述