vue3.x异步组件
2021-10-19 本文已影响0人
学杂不精
在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块
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, // 加载过程中展示组件
}