在大型應用中，我們可能需要將應用分割成小一些的程式碼塊，並且只在需要的時候才從伺服器載入一個模組。為了簡化，vue允許你以一個工廠函式的方式定義你的元件。這個工廠函式會非同步解析你的元件定義。vue只有在這個元件需要被渲染的時候才會觸發該工廠函式，且會把結果快取起來供未來重渲染。

Vue.component('async-example', function (resolve, reject) {

setTimeout(function () {

// 向 `resolve` 回撥傳遞元件定義

resolve({

template: '<div>I am async!</div>'

})

}, 1000)

})

如你所見，這個工廠函式會收到一個resolve回撥，這個回撥函式會在你從伺服器得到元件定義的時候被呼叫。你也可以呼叫reject（reason）來表示載入失敗、這裡的settimeout是為了演示用的

如何獲取元件取決於你自己。一個推薦的做法是將非同步元件和webpack的code-splitting功能一起配合使用。

vue.component('async-webpack-example', function (resolve){

這個特殊的require語法將會告訴webpack

自動將你構建程式碼切割成多個包，這些包會通過ajax請求載入

require（['./my-async-component'],resolve）

})

你也可以在工廠函式總返回一個promise,所以把webpack2和es5語法載入一起，我們可以寫成這樣

Vue.component(

'async-webpack-example',

// 這個 `import` 函式會返回一個 `Promise` 物件。

() => import('./my-async-component')

)

當使用區域性註冊的時候，你也可以直接提供一個返回promise的函式

new Vue({

// ...

components: {

'my-component': () => import('./my-async-component')

}

})

如果你是一個browserify使用者同時喜歡使用非同步元件，很不幸這個工具的作者明確表示非同步載入並不會被browserify支援”，至少官方不會。Browserify 社群已經找到了一些變通方案，這些方案可能會對已存在的複雜應用有幫助。對於其它的場景，我們推薦直接使用 webpack，以擁有內建的被作為第一公民的非同步支援。

處理載入狀態

這裡的非同步元件工廠函式可以返回一個如下格式的物件

const AsyncComponent = () => ({

// 需要載入的元件 (應該是一個 `Promise` 物件)

component: import('./MyComponent.vue'),

// 非同步元件載入時使用的元件

loading: LoadingComponent,

// 載入失敗時使用的元件

error: ErrorComponent,

// 展示載入時元件的延時時間。預設值是 200 (毫秒)

delay: 200,

// 如果提供了超時時間且元件載入也超時了，

// 則使用載入失敗時使用的元件。預設值是：`Infinity`

timeout: 3000

})

注意如果你希望在 Vue Router 的路由元件中使用上述語法的話，你必須使用 Vue Router 2.4.0+ 版本。