Day 13 - 非同步元件

在大型专案中,我们会需要注入大量的元件,每次都要把所有的元件载入有时相对耗效能,这时候就可以使用非同步组件在需要时再载入需要的元件。

定义非同步元件

如果是非同步组件的话就会是下面三种不同的传入参数:
工厂函数、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


<<:  视觉化平台规划

>>:  Day 13. 是时候来规划个专案了,先来个小调查

[Day7]C# 鸡础观念- 你有选择障碍吗? 交给 if陈述式 解决吧!

在生活中,我们常常面临选择, 今天午餐吃什麽好呢?饭还是面呢? 明天要去哪里玩?山上还是海边呢? 那...

Day 13:「谁还在背字典?」- Tailwind IntelliSense 插件

嗨大家好,昨天建立的如何呢! 我想应该不会遇到太多的困难吧~ 虽然上次没有明讲, 但我想应该大部分...

Day05 - Artisan 指令列

介绍 Artisan 是 Laravel 里的指令列介面名称,当开发应用程序时,它提供了许多有用的指...

DAY1 揭开序幕与 MongoDB 简介

DAY1 揭开序幕与 MongoDB 简介 前言 终於鼓起勇气要报名 iThome 铁人赛! 本系列...

[第06天]理财达人Mx. Ada-下单作业

前言 本文说明如何进行下单作业。 程序实作 # 设定交易标的 # 以台股上市股票:长荣 contra...