Vue動態組件&異步組件

在動態組件上使用keep-alive

咱們以前曾經在一個多標籤的界面中使用is特性來切換不一樣的組件：

<component v-bind:is="currentTabComponent"></component>

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

如上是vue官網的例子，你會注意到若是你選擇一篇文章，切換到Archive標籤，而後切回Posts， 是不會繼續展現你以前選擇的文章的。由於你每次切換新標籤的時候，Vue都會建立一個新的currentTabComponent實例。

從新建立動態組件的行爲一般是很是有用，可是在這個案例中，咱們更但願那些標籤的組件實例可以被它們第一次被建立的時候緩存下來，爲了解決這個問題，咱們能夠用一個<keep-alive>元素將其動態組件包裹起來。

//失活的組件將會被緩存
<keep-alive>
    <component v-bind:is="currentTabComponent"></component>
</keep-alive>

異步組件

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

Vue.component('async-example', funcion(resolve, reject) {
    setTimeout(function() {
        //向resolve回調傳遞組件定義
        resolve({
            template: '<div>i am async</div>'
        })
    }, 1000)
})

如你所見，這個工廠函數會收到一個resolve回調，這個回調函數會在你的服務器獲得組件定義的時候被調用。你也能夠調用reject來表示加載失敗。這裏的setTimeout是爲了演示用，如何獲取組件取決於你本身。一個推薦的作法就是將異步組件和webpack的code-slitting功能一塊兒配合使用：

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

你也能夠在工廠函數中返回一個Promise，因此把webpack2和ES2015語法加在一塊兒，咱們能夠寫成這樣：

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

當使用局部註冊的適合，你也能夠直接提供一個返回Promise的函數：

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

處理加載狀態 2.3.0新增

這裏的異步組件工廠函數也能夠返回一個以下格式的對象：

const AsyncComponent = () => ({
   // 須要加載的組件 (應該是一個 `Promise` 對象)
  component: import('./MyComponent.vue'),
  // 異步組件加載時使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 展現加載時組件的延時時間。默認值是 200 (毫秒)
  delay: 200,
  // 若是提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`Infinity`
  timeout: 3000 
})

注意若是你但願在 Vue Router 的路由組件中使用上述語法的話，你必須使用 Vue Router 2.4.0+ 版本。