18：vue3 异步加载

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

 

<template>
  <h3>异步加载</h3>
  <KeepAlive>
    <component :is="tabComponent"></component>
  </KeepAlive>
  <button @click="changeHandle">切换组件</button>
</template>

<script>

import { defineAsyncComponent } from "vue"
import ComponentA from "./components/ComponentA.vue"
const  AsyncComponentB =defineAsyncComponent (()=>
  import('./components/ComponentB.vue')
)

export default{
    data(){
      return{
        tabComponent:"ComponentA"
      }
    },
    methods:{
      changeHandle(){
        this.tabComponent=this.tabComponent=="ComponentA"?"AsyncComponentB":"ComponentA"
      }
   },
   components:{
    ComponentA,
    AsyncComponentB
   }
    
}
</script>

 

切换组件时，网络请求会加载B