vue3.x异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块

vue2.x 曾经简单的异步组件

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

vue3.x 异步组件

vue3.x 提供了一个函数 defineAsyncComponent，来简化使用异步组件

组件内使用异步组件

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

全局引入异步组件

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('@/components/AsyncComponent.vue')
)
app.component('async-component', AsyncComp)

高级使用

异步加载组件支持延迟，超时，加载中，加载出错等设置，可以解决实际使用过程中文件丢失，文件更新等实际项目运行中的一些问题。

const asyncComp = {
  loader: () => import('@/components/AsyncComponent.vue'),
  delay: 1000,
  timeout: 3000,
  error: ErrorComponent, // 加载报错展示组件
  loading: LoadingComponent, // 加载过程中展示组件
}