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。

1. include：只有名稱匹配的組件會被緩存。

2. 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 頁。

感謝各位的閱讀！關于“Vue中組件如何緩存”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！