在大型专案中,我们会需要注入大量的元件,每次都要把所有的元件载入有时相对耗效能,这时候就可以使用非同步组件在需要时再载入需要的元件。
如果是非同步组件的话就会是下面三种不同的传入参数:
工厂函数、Promise以及物件。
在工厂函数中,有两个参数: resolve 函数跟 reject 函数。
我们必须使用非同步的方式取回元件,如果成功则叫用 resolve 并带入组件,告诉工厂函数已经取得元件,而 reject 则是元件取得失败时进行呼叫。
Vue.component('async-component-factory-function', (resolve, reject) => {
setTimeout(() => {
resolve({
template: '<div>Async Component</div>'
});
}, 1000);
});
透过工厂函数可以得知是否呼叫成功,呼叫失败的话则会回传错误需讯息:
Vue.component('async-component-base', (resolve, reject) => {
setTimeout(() => {
reject('Error!!!');
}, 1000);
});
不过,我们也可以使用Promise进行改写,因为promise的第一个参数即为工厂函数。
Vue.component('async-component-promise', () => new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: '<div>Async Component</div>'
});
reject('Error!!!');
}, 1000);
}));
另外,异步元件也支援了其他物件来让我们客制化异步元件:
物件,它可以在物件中定义三个元件及两个数值:
component : 非同步元件。
loading : 在非同步元件载入前渲染於页面的元件。
error : 载入错误时的元件。
delay : 在 delay 多久後显示等待元件。
timeout : 超过 timeout 时间後渲染错元件。
const LoadingComponent = {
template: '<div>Loading...</div>'
};
const ErrorComponent = {
template: '<div>Error!!!</div>'
};
Vue.component('async-component', () => ({
component: new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: '<div>Async Component</div>'
});
reject('Error!!!');
}, 1000);
}),
loading: LoadingComponent,
error: ErrorComponent,
delay: 300,
timeout: 5000
}));
这些参数的意思是:
在 1 秒载入组件。
0.3 秒後显示等待元件 LoadingComponent 。
如果超过 5 秒,显示错误元件 ErrorComponent 。
原始码: https://codepen.io/adjwcmzg/pen/OJgrrqw
在生活中,我们常常面临选择, 今天午餐吃什麽好呢?饭还是面呢? 明天要去哪里玩?山上还是海边呢? 那...
嗨大家好,昨天建立的如何呢! 我想应该不会遇到太多的困难吧~ 虽然上次没有明讲, 但我想应该大部分...
介绍 Artisan 是 Laravel 里的指令列介面名称,当开发应用程序时,它提供了许多有用的指...
DAY1 揭开序幕与 MongoDB 简介 前言 终於鼓起勇气要报名 iThome 铁人赛! 本系列...
前言 本文说明如何进行下单作业。 程序实作 # 设定交易标的 # 以台股上市股票:长荣 contra...