異步組件使用詳解

當使用局部注冊的時候，你也可以直接提供一個返回 Promise 的函數

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

這樣引入的組件，只有在使用到的時候才加載

異步組件可以解決組件之間循環引用產生的問題

組件之間循環引用

假設你需要構建一個文件目錄樹，像訪達或資源管理器那樣的。你可能有一個 <tree-folder> 組件，模板是這樣的：

 

<p>
  <span>{{ folder.name }}</span>
  <tree-folder-contents :children="folder.children"/>
</p>

 

還有一個 <tree-folder-contents> 組件，模板是這樣的：

<ul>
  <li v-for="child in children">
    <tree-folder v-if="child.children" :folder="child"/>
    <span v-else>{{ child.name }}</span>
  </li>
</ul>

當你仔細觀察的時候，你會發現這些組件在渲染樹中互為對方的后代和祖先——一個悖論！

然而，如果你使用一個模塊系統依賴/導入組件，例如通過 webpack 或 Browserify，你會遇到一個錯誤：

Failed to mount component: template or render function not defined.

為了解釋這里發生了什么，我們先把兩個組件稱為 A 和 B。模塊系統發現它需要 A，但是首先 A 依賴 B，但是 B 又依賴 A，但是 A 又依賴 B，如此往復。這變成了一個循環，不知道如何不經過其中一個組件而完全解析出另一個組件。為了解決這個問題，我們需要給模塊系統一個點，在那里“A 反正是需要 B 的，但是我們不需要先解析 B。”

在本地注冊組件的時候，你可以使用 webpack 的異步 import：

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

這樣問題就解決了！