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

ztj100 2025-06-24 18:18 3 浏览 0 评论

根据上节课的代码，我们在切换到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组件的时候，就看到了网络请求：

vue3 component

上一篇：vue3 动态组件使用技巧（vue如何实现动态组件）
下一篇：焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!

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

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

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

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

如何快速切换node版本?利用n包快速切换nodejs版本

详解MySQL 字符串拼接之concat\concat_ws\group_concat

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起