在大型專案中，我們常需要將應用分割多個元件，並在需要的時候從服務器加載一個模塊。

Vue.component ('async-name',{ })

這是我們註冊全局元件的方式，程式碼上的"{ }"，第二個參數是放元件的物件，若是異步就有下面三種定義方式:

1.Factory Function
2.Promise
3.Object

工廠函數-Factory Function

工廠函數有兩個回調函數: resolve、reject
resolve回調函數會從你的服務得到元件定義的時候被調用，可以使用reject(message)來表示加載失敗。
我們使用setTimeout來模擬延後1秒執行 resolve 的效果。

Vue.component('name', function (resolve, reject) => { 
  setTimeout(()=> {
    resolve({
      template: '<div>wait 1 second</div>'
    })
  },1000)
  //code... 
})

再來 reject(message) 記得他要傳入的是發生錯誤的訊息

Vue.component('name', function (resolve, reject) => { 
  setTimeout(()=> {
    reject('tpye some error message here')
  },1000)
  //code... 
})

Promise

我們也可以使用Promise傳入

Vue.component('async-component-promise', () => new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve({
      template: '<div>wait 1 second</div>'
    });
  }, 1000);
}));

把webpack 2和ES2015語法加在一起，我們可以這樣使用動態導入。

使用全局註冊:

Vue.component(
  'async-webpack-example',
  () => import('./AsyncComponent.vue')
)

使用局部註冊:

new Vue({
    components: { 
      'my-component': () => import('./AsyncComponent.vue') 
    }
    //code...
}

object

這裡的異步元件也可以傳入一個物件常數，其設定如下說明

1.component: 異步要加載的元件
2.loading: 加載中使用的元件
3.error: 加載失敗時使用元件
4.delay: 加載延遲時間，默認值200ms
5.timeout: 設定加載逾時時間，默認值' Infinity '

const AsyncComponent = () => ({ 
  component: import('./AsyncComponent.vue'), 
  loading: LoadingComponent, 
  error: ErrorComponent, 
  delay: 200, 
  timeout: 3000 
})
Vue.component('async-example', AsyncComponent )

這樣是怎麼樣的效果呢?

我們想要載入異步元件
首先在0.2秒延遲後，顯示加載中的元件-LoadingComponent
加載若不順利，超過三秒逾時了，則會顯示錯誤元件-ErrorComponent
加載若順利，則顯示異步元件-AsyncComponent

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang