Question

使用 defineAsyncComponent 方法定义异步组件

• component 选项被重命名为 loader
• 与 2.x 不同，Loader 函数本身不再接收 resolve 和 reject 参数，且必须返回一个 Promise。

// 2.x 版本
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}
        
// 3.x 版本
const asyncComponent = defineAsyncComponent(
  () =>
  new Promise((resolve, reject) => {
    resolve({
    template: '<div>I am async!</div>'
    })
    // 也可以调用 reject(reason)，来表示加载失败
    /* ... */
  })
)

Vue 2.x

异步组件是通过将组件定义为返回 Promise 的函数来创建的，如：

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

或者，对于带有选项的更高阶的组件语法：

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

Vue 3.x

在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件需要通过将其包裹在 defineAsyncComponent 方法中来定义：

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

// 不带选项的异步组件
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// 带选项的异步组件
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})

与 Suspense 一起使用

异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <Suspense> ，它将被视为该 <Suspense> 的异步依赖。在这种情况下，加载状态将由 <Suspense> 控制，组件自身的加载、错误、延迟和超时选项都将被忽略。

通过在其选项中指定 suspensible: false，异步组件可以退出 Suspense 控制，并始终控制自己的加载状态。