What are the changes in Vue3 asynchronous components?

Today, I would like to share with you the relevant knowledge about the changes in Vue3 asynchronous components. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

First, let's take a look at the changes in asynchronous components:

A new method, defineAsyncComponent, has been added to explicitly define asynchronous components

Rename the component option: loader

The Loader function no longer accepts resolve and reject as arguments, and must return a Promise

Used to be asynchronous components

In Vue 2.x, it is convenient to define an asynchronous component:

Const asyncPage = () = > import ('. / HugePageComponent.vue')

If you need some advanced usage (I bet you don't know it for fifty cents):

Import {ErrorComponent, LoadingComponent} from 'xxx'; const asyncPage = {component: () = > import ('. / HugePageComponent'), delay: 1000, timeout: 3000, error: ErrorComponent, loading: LoadingComponent,}

Upcoming Vue 3 Asynchronous components

Because functional components are defined by ordinary functions in Vue 3, asynchronous components need to be explicitly defined through defineAsyncComponent.

Import {defineAsyncComponent} from 'vue'; import {ErrorComponent, LoadingComponent} from' xxx'

/ / General usage const asyncPage = defineAsyncComponent (() = > import ('. / HugePageComponent')); / / Advanced usage const asyncPageWithOptions = defineAsyncComponent ({/ / here was component, but now it is loader: () = > import ('. / HugePageComponent'), delay: 1000, timeout: 3000, errorComponent: ErrorComponent, loadingComponent: LoadingComponent,})

In addition, unlike Vue 2.x, the loader function no longer provides resolve and reject as default parameters, and must return a Promise:

/ / 2.x version const oldAsyncComponent = (resolve, reject) = > {/... /}

/ / 3.x version const newAsyncComponent = defineAsyncComponent (() = > {return new Promise ((resolve, reject) = > {/ *... * /});}); these are all the contents of the article "what are the changes in Vue3 Asynchronous components?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.