之前在《Vue一個案例引發的動態元件與全域性事件繫結總結》這篇文章中簡單提到過元件的快取。當時只是簡單的提供了一個解決問題的思路，並沒有說到多少元件快取的東西，今天我們就來詳細說說元件的快取。
元件化開發模式下，我們會把整個專案拆分成很多元件，然後按照合理的方式組織起來。
自然就存在元件之間的切換問題，Vue 中有個「動態元件」的概念，它能夠讓我們更好的實現元件的切換。
在實際的專案開發中，產品是不可能放過我們的，需求總是在不停的變化，如果你碰到那些不改需求的產品就嫁了吧，太難得了。
最近專案中需要實現一個保留上一次Tab 頁的功能。如下圖，當我選擇 B 元件時，我希望從首頁切換到設定頁時，還會停留在 B 元件，而不是重新渲染為預設的 A 元件。
首先我們可以使用內建元件 <component>實現動態元件的效果。
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
@click="currentTab = tab"
></button>
<component :is="currentTab"></component>
</div>
</template>
<script>
export default {
name: "Tab",
data() {
return {
currentTab: "A",
tabs: ['A','B']
};
}
};
</script>
複製程式碼這時，我們做到了兩個元件之間的切換，但動態元件在切換的過程中，元件的例項都是「重新建立」的，而我們需要保留元件狀態。
為了解決這個問題，你還需要使用 vue 內建元件 <keep-alive>。
keep-alive
keep-alive 包裹「動態元件」時，會快取不活動的元件例項，而不是銷燬它們。它是一個抽象的元件，它自身不會渲染成一個 DOM 元素，也不會出現在父元件鏈中。
值得注意的是 「動態元件」這四個字，它只有在包含動態元件時，才會產生效果。如果不是動態元件則會無效。比如下面這種用法是沒有效果的。
<keep-alive>
<my-component></my-component>
</keep-alive>
複製程式碼既然如此，我們來看看 keep-alive 常用的幾種方式：
方案一： 使用內建元件 <component>。
<keep-alive>
<component :is="view"></component>
</keep-alive>
複製程式碼方案二： 當出現條件判斷時的子元件
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
複製程式碼方案三： 結合路由使用時
<keep-alive>
<router-view></router-view>
</keep-alive>
複製程式碼以上三種方式元件都會被快取。另外一點需要注意的是，<keep-alive> 只能用在只有一個子元件的情況。如果你在其中有 v-for 則不會產生效果。
明白瞭如何使用 <keep-alive> 時，想要保留我們的 Tab 頁，我們只需這麼做即可。
<keep-alive>
<router-view></router-view>
</keep-alive>
複製程式碼但是這裡你會發現，我們把每一個元件都快取了起來，不僅案例中的「設定頁」被快取連「首頁」也一起被快取了起來，這不是我們想要的。
vue 幫我們也考慮到了這一點，所以我們可以選擇性的進行元件的快取，也就是說你想讓誰快取，就讓誰快取，非常的自由與可配置。
原因是因為 <keep-alive> 提供了兩個屬性 include 與 exclude。
include：只有名稱匹配的元件會被快取。exclude：任何名稱匹配的元件都不會被快取。
二者都可以用逗號分隔字串、正規表示式或一個陣列來表示。
<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>
複製程式碼所以，結合 <keep-alive> 的 include 或 exclude屬性，我們就可以輕易的選擇需要快取的元件。
<keep-alive include="system">
<router-view></router-view>
</keep-alive>
複製程式碼這樣我們就可以只快取「設定頁」，然後實現保留上次選擇的 Tab 頁。
歡迎公眾號：六小登登，與我一起交流。
