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

26. 异步组件

根据上节课的代码,我们在切换到B组件的时候,发现并没有网络请求:


异步组件:

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

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

vue 复制代码
<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组件的时候,就看到了网络请求:

相关推荐
Larry_Yanan1 小时前
QML学习笔记(十七)QML的属性变更信号
javascript·c++·笔记·qt·学习·ui
真的想不出名儿2 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊2 小时前
Polar WEB(1-20)
前端
笨蛋不要掉眼泪2 小时前
SpringBoot项目Excel成绩录入功能详解:从文件上传到数据入库的全流程解析
java·vue.js·spring boot·后端·spring·excel
吃饺子不吃馅3 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防3 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump3 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅4 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士4 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing4 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript