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

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组件的时候，就看到了网络请求：