`VUE3`中使用`defineAsyncComponent` 实现异步组件的加载

优化常用
节省初始加载的时间、需要加载时候加载相应的组件、提升性能、提升用户体验


import {defineAsyncComponent} from 'vue';
import {LoadingComp,ErrorComp} from './components/LoadComp.vue';
 
const AsyncComponent = defineAsyncComponent({
  loader:()=>import('./components/NeedAsyncComp.vue'),
  loadingComponent: LoadingComp, // 加载过程中显示占位的内容
  errorComponent: ErrorComp, // 加载失败的备用组件
  delay:200, // 延迟显示loadingComp的时间
  timeout:2000, // 异步加载超时时间
});
 
export default AsyncComponent;


import AsyncComponent from './AsyncComponent.js';
 
const routes = [{
  path:'/example',
  component:AsyncComponent
}];

VUE3中使用defineAsyncComponent 实现异步组件的加载

`VUE3`中使用`defineAsyncComponent` 实现异步组件的加载