前端框架

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, // 加载过程中展示组件
}
上一篇下一篇

猜你喜欢

热点阅读