非同步元件的特點：

Vue 只有在這個元件需要被渲染的時候才會從伺服器端請求元件的相關js，且會把結果快取起來供未來重渲染。

非同步元件的好處：

提高效能。在大型應用中，我們可以將應用分割成小一些的程式碼塊，並且只在需要的時候才從伺服器載入一個模組。通常的使用就是在配置路由的時候，使用非同步元件的載入方式，只有路由被觸發時，才會載入對應的元件。而不是一次性載入所有的元件，這樣很有利於提高效能。

非同步元件三種實現方式

工廠函式

// 全域性註冊
Vue.component('child1', function (resolve) {
  require(['./components/child1'], resolve)
})
 
 
// 區域性註冊
components: {
  Child1: function (resolve) {
    require(['./components/child1'], resolve)
  }
}

promise

// 全域性註冊
Vue.component('child2', () => import('./components/child2'))
 
// 區域性註冊
components: {
  Child2: () => import('./components/child2')
}

高階元件

高階元件的方式可以處理非同步元件的載入狀態和錯誤狀態。loading 和 error 支援傳入元件。

// 全域性註冊
Vue.component('child3', () => ({
    component: import('./components/child3.vue'),
    loading: {template: '<div>Loading</div>'},
    error: {template: '<div>error</div>'},
    delay: 200,
    timeout: 3000
  })
)
// 區域性註冊
components: {
  Child3: () => ({
    // 需要載入的元件 (應該是一個 `Promise` 物件)
 

    component: import('./components/child3.vue'),
    // 非同步元件載入時使用的元件
    loading: {template: '<div>Loading</div>'},
    // 載入失敗時使用的元件
    error: {template: '<div>error</div>'},
    // 展示載入時元件的延時時間。預設值是 200 (毫秒)
    delay: 200,
    // 如果提供了超時時間且元件載入也超時了，
    // 則使用載入失敗時使用的元件。預設值是：`Infinity`
    timeout: 3000
  })
}