1. Introduction

Vue3 Async Components Async Components in VUe3 Async Components

  • usedefineAsyncComponentMethod to define async Components
  • Of the component configuration itemcomponentRename toloader
  • The loader function (corresponding to vue2’s Component function) no longer accepts resolve and reject, and must return a Promise

2. How to use VUE2

Vue2 defines async components via a function that returns promise:

const asyncPage = () = > import('./NextPage.vue')
Copy the code

The multiple configuration modes are as follows:

const asyncPage = {
  component: () = > import('./NextPage.vue'),
  delay: 200.timeout: 3000.error: ErrorComponent,
  loading: LoadingComponent
}
Copy the code

3. How to use VUe3

In VUE3, defining async Components asynchronous components must use the defineAsyncComponent method to explicitly define async Components asynchronous components rather than synchronous components. At the same time, the Component configuration item is renamed Loader. The following is an example:

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

// No configuration item definition mode
const asyncPage = defineAsyncComponent(() = > import('./NextPage.vue'))

// How the configuration item is defined
const asyncPageWithOptions = defineAsyncComponent({
  loader: () = > import('./NextPage.vue'), Rename the component configuration item to loader
  delay: 200.timeout: 3000.errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
Copy the code