前端流行框架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组件的时候,就看到了网络请求:

相关推荐
F2E_Zhangmo8 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip13 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel14 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休14 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪14 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do14 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选14 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选15 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼15 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——15 小时前
前端登录鉴权详解
前端·javascript