Vue學習筆記-深入組件(動態組件/異步組件)

在動態組件上使用 keep-alive：

當在這些組件之間切換的時候，你有時會想保持這些組件的狀態，以避免反復重渲染導致的性能問題

 

 

異步組件:在大型應用中，我們可能需要將應用分割成小一些的代碼塊，並且只在需要的時候才從服務器加載一個模塊。為了簡化，Vue 允許你以一個工廠函數的方式定義你的組件，這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數，且會把結果緩存起來供未來重渲染。例如：

 

異步組件

<component :is="currentTabComponent"></component>

components: {
    homePage: function(resolve) {
        require(['../homePage'], resolve)
    },
    resourceManage: function(resolve) {
        require(['../resourceManage'],resolve)
    }
}

Vue.component('async-webpack-example', function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構建代碼切割成多個包，這些包
  // 會通過 Ajax 請求加載
  require(['./my-async-component'], resolve)
})

require 像是一個帶回調的異步請求 成功數據在resolve

工廠函數會收到一個 resolve 回調

你也可以在工廠函數中返回一個 Promise

 

Vue.component(
  'async-webpack-example',
  // 這個 `import` 函數會返回一個 `Promise` 對象。
  () => import('./my-async-component')
)

局部注冊直接返回一個promise的函數

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