Vue项目中异步组件的引入使用

要在Vue项目中引入异步组件，可以使用defineAsyncComponent函数（在Vue 3中）或者在组件的定义中使用动态import（在Vue 2和Vue 3中都支持）。

Vue 3 使用 defineAsyncComponent 

import { defineAsyncComponent } from 'vue';  
  
const AsyncComponent = defineAsyncComponent(() =>  
  import('./MyComponent.vue')  
);  
  
export default {  
  components: {  
    AsyncComponent  
  }  
}

 Vue 2 和 Vue 3 使用动态 import

const AsyncComponent = () => import('./MyComponent.vue');  
  
export default {  
  components: {  
    AsyncComponent  
  }  
}

在上面的代码中，MyComponent.vue是你想要异步加载的组件文件。import('./MyComponent.vue')会返回一个Promise，当组件被需要时，这个Promise会被解析为组件的定义。

一个较为完整的在父组件中使用异步组件的例子

<template>  
  <div>  
    <h1>Parent Componen