Vue3异步组件

什么是异步组件

在传统的 Vue.js 开发中，组件是在应用程序启动时就立即加载的。这种方式虽然简单，但是会导致应用程序的初始加载时间变长，影响用户体验。为了提高应用程序的性能和加载速度，Vue.js 提供了异步组件。

异步组件是一种延迟加载组件的方式，即只有在需要使用该组件时才会进行加载。

比如：下面案例中，Home，List，Center是一个需要动态显示的组件，我们在注册这三个组件的时候将他们三个注册为异步组件，当页面第一次加载的时候，就只加载了一个Home组件，其它2个组件则在需要的时候才会加载

使用案例：

全局注册异步组件

上面是局部注册异步组件，当然我们也可以全局注册异步组件：如下

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)