Jun 01, 2021 Article blog
Let's first look at the changes to asynchronous components:
defineAsyncComponent
is used to explicitly define asynchronous components
component
option changes its name:
loader
Loader
function no longer
resolve
and
reject
as arguments, and must return a
Promise
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 five cents you don't know this usage):
import { ErrorComponent, LoadingComponent } from 'xxx'; const asyncPage = { component: () => import('./HugePageComponent'), delay: 1000, timeout: 3000, error: ErrorComponent, loading: LoadingComponent, }
Because functional components are defined by normal functions in
Vue 3
asynchronous components need to be explicitly defined through
defineAsyncComponent
import { defineAsyncComponent } from 'vue'; import { ErrorComponent, LoadingComponent } from 'xxx';
// 常规用法
const asyncPage = defineAsyncComponent(() => import('./HugePageComponent'));
// 高级用法
const asyncPageWithOptions = defineAsyncComponent({
// 这里之前是 component,现在改叫 loader 了
loader: () => import('./HugePageComponent'),
delay: 1000,
timeout: 3000,
errorComponent: ErrorComponent,
loadingComponent: LoadingComponent,
});
In addition, unlike
Vue 2.x
loader
function no longer
resolve
and
reject
as the default parameters, and must return a
Promise
2.x version const oldAsyncComponent s (resolve, reject) s/> / ... / }
// 3.x 版本
const newAsyncComponent = defineAsyncComponent(
() => {
return new Promise((resolve, reject) => {
/* ... */
});
}
);
These are
Vue 3
changes to asynchronous components, and students interested in
Vue
can take a look at the tutorial
Vue 1 tutorial: https://www.w3cschool.cn/vuejs/
Vue 2 tutorial: https://www.w3cschool.cn/vuejs2/
Vue 2.x Microsyscope: https://www.w3cschool.cn/minicourse/play/vuecourse
Source: www.toutiao.com/a6853814142684365320/