vue3 异步组件

书接上文，我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理，然后导出使用，你会发现这个组件是一个函数类型。

然后我再去看一下vue2时，我们的异步组件引入方式：

const asyncModal = () => import('./Modal.vue')

你会发现除了异步组件也是一个函数类型，这就尴尬了，怎么区分呢？

vue3提供了一个defineAsyncComponent函数用于区分异步组件。

import { defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

需要注意的时，vue-router的异步组件还是和以往一样，跟defineAsyncComponent是没有关系的。

高级组件

引入的组件是支持参数配置的，vue2和vue3略有不同，其中最大的改动就是原来component改为了loader。

vue2：

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

vue3：

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

注意loader函数必须接一个promise对象。