vue 组件二 动态组件（Component）和异步组件（defineAsyncComponent）

在Vue中，可以使用component标签并通过其:is属性动态地渲染不同的组件。另外，可以使用defineAsyncComponent函数来定义一个异步组件，它可以用来从一个异步源（如一个promise或一个返回Promise的工厂函数）加载组件。

以下是一个简单的例子，展示如何使用动态组件和异步组件：

<template>
  <div>
    <!-- 使用动态组件 -->
    <component :is="currentComponent"></component>
 
    <!-- 使用异步组件 -->
    <async-component></async-component>
  </div>
</template>
 
<script>
import { defineAsyncComponent } from 'vue';
 
export default {
  data() {
    return {
      currentComponent: 'my-component-a'
    };
  },
  components: {
    'my-component-a': {
      template: '<div>Component A</div>'
    },
    'my-component-b': {
      template: '<div>Component B</div>'
    },
    'async-component': defineAsyncComponent(() =>
      import('./AsyncComponent.vue')
    )
  }
};
</script>

在上面的例子中，currentComponent是一个响应式属性，它可以被设置为不同的组件名称，以渲染不同的组件。async-component是一个异步组件，它会等待AsyncComponent.vue文件被导入后才开始渲染。

请注意，异步组件可以用于分割代码或按需加载组件，这对于提升应用性能非常有帮助。