vue - 异步组件 、动态组件

动态组件：（缓存组件）

//重新创建组件
 <component :is="componentName"></component>

//缓存动态组件的状态，不用重新创建组件
<keep-alive>
     <component :is="componentName"></component>
</keep-alive>

//使用场景：tab切换等。

异步组件：V3版本 ， 如果直接import component from '.../'。组件会被引入。异步组件在用到的时候，才去引用，防止一次性加载过大的组件。

<async-component v-if="isShow"></async-component>

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})