炫意html5
最早CSS3和HTML5移动技术网站之一

[Vue.js 3.0] Migration – Async Components

# Async Components


new

# Overview

Here is a high level overview of what has changed:

  • New defineAsyncComponent helper method that explicitly defines async components
  • component option renamed to loader
  • Loader function does not inherently receive resolve and reject arguments and must return a Promise

For a more in-depth explanation, read on!

# Introduction

Previously, async components were created by simply defining a component as a function that returned a promise, such as:

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

Or, for the more advanced component syntax with options:

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

# 3.x Syntax

Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new defineAsyncComponent helper:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// Async component without options
const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
// Async component with options
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./NextPage.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent
})

Another change that has been made from 2.x is that the component option is now renamed to loader in order to accurately communicate that a component definition cannot be provided directly.

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

In addition, unlike 2.x, the loader function no longer receives the resolve and reject arguments and must always return a Promise.

// 2.x version
const oldAsyncComponent = (resolve, reject) => {
/* ... */
}
// 3.x version
const asyncComponent = defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
/* ... */
})
)

For more information on the usage of async components, see:

  • Guide: Dynamic & Async Components

炫意HTML5 » [Vue.js 3.0] Migration – Async Components

CSS3教程HTML5教程