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

我們之前曾經在一個多標簽的界面中使用?is?特性來切換不同的組件：

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

當在這些組件之間切換的時候，你有時會想保持這些組件的狀態，以避免反復重渲染導致的性能問題。例如我們來展開說一說這個多標簽界面：

PostsArchive

• Cat Ipsum
• Hipster Ipsum
• Cupcake Ipsum

Click on a blog title to the left to view it.

你會注意到，如果你選擇了一篇文章，切換到?Archive?標簽，然后再切換回?Posts，是不會繼續展示你之前選擇的文章的。這是因為你每次切換新標簽的時候，Vue 都創建了一個新的?currentTabComponent?實例。

重新創建動態組件的行為通常是非常有用的，但是在這個案例中，我們更希望那些標簽的組件實例能夠被在它們第一次被創建的時候緩存下來。為了解決這個問題，我們可以用一個?<keep-alive>?元素將其動態組件包裹起來。

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

來看看修改后的結果：

PostsArchive

• Cat Ipsum
• Hipster Ipsum
• Cupcake Ipsum

Click on a blog title to the left to view it.

現在這個?Posts?標簽保持了它的狀態 (被選中的文章) 甚至當它未被渲染時也是如此。你可以在這個 fiddle?查閱到完整的代碼。

注意這個?<keep-alive>?要求被切換到的組件都有自己的名字，不論是通過組件的?name?選項還是局部/全局注冊。

你可以在?API 參考文檔?查閱更多關于?<keep-alive>?的細節。

異步組件

在大型應用中，我們可能需要將應用分割成小一些的代碼塊，并且只在需要的時候才從服務器加載一個模塊。為了簡化，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，所以把 webpack 2 和 ES2015 語法加在一起，我們可以寫成這樣：

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，以擁有內建的被作為第一公民的異步支持。

處理加載狀態

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+ 版本。

from:?https://cn.vuejs.org/v2/guide/components-dynamic-async.html

總結

以上是生活随笔為你收集整理的Vue.js 动态组件 异步组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。