說說 Vue 中組件的緩存

以前在《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 頁。

歡迎公衆號：六小登登，與我一塊兒交流。