Vue中組件如何緩存

這篇文章給大家分享的是有關(guān)Vue中組件如何緩存的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

最近項(xiàng)目中需要實(shí)現(xiàn)一個(gè)保留上一次Tab 頁的功能。如下圖，當(dāng)我選擇 B 組件時(shí)，我希望從首頁切換到設(shè)置頁時(shí)，還會停留在 B 組件，而不是重新渲染為默認(rèn)的 A 組件。

首先我們可以使用內(nèi)置組件 <component>實(shí)現(xiàn)動態(tài)組件的效果。

<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>

這時(shí)，我們做到了兩個(gè)組件之間的切換，但動態(tài)組件在切換的過程中，組件的實(shí)例都是「重新創(chuàng)建」的，而我們需要保留組件狀態(tài)。

為了解決這個(gè)問題，你還需要使用 vue 內(nèi)置組件 <keep-alive>。

keep-alive

keep-alive 包裹「動態(tài)組件」時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。它是一個(gè)抽象的組件，它自身不會渲染成一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。

值得注意的是 「動態(tài)組件」這四個(gè)字，它只有在包含動態(tài)組件時(shí)，才會產(chǎn)生效果。如果不是動態(tài)組件則會無效。比如下面這種用法是沒有效果的。

<keep-alive>
  <my-component></my-component>
</keep-alive>

既然如此，我們來看看 keep-alive 常用的幾種方式：

方案一： 使用內(nèi)置組件 <component>。

<keep-alive>
 <component :is="view"></component>
</keep-alive>

方案二： 當(dāng)出現(xiàn)條件判斷時(shí)的子組件

<keep-alive>
 <comp-a v-if="a > 1"></comp-a>
 <comp-b v-else></comp-b>
</keep-alive>

方案三： 結(jié)合路由使用時(shí)

 <keep-alive>
   <router-view></router-view>
 </keep-alive>

以上三種方式組件都會被緩存。另外一點(diǎn)需要注意的是，<keep-alive> 只能用在只有一個(gè)子組件的情況。如果你在其中有 v-for 則不會產(chǎn)生效果。

明白了如何使用 <keep-alive> 時(shí)，想要保留我們的 Tab 頁，我們只需這么做即可。

<keep-alive>
  <router-view></router-view>
</keep-alive>

但是這里你會發(fā)現(xiàn)，我們把每一個(gè)組件都緩存了起來，不僅案例中的「設(shè)置頁」被緩存連「首頁」也一起被緩存了起來，這不是我們想要的。

vue 幫我們也考慮到了這一點(diǎn)，所以我們可以選擇性的進(jìn)行組件的緩存，也就是說你想讓誰緩存，就讓誰緩存，非常的自由與可配置。

原因是因?yàn)?<keep-alive> 提供了兩個(gè)屬性 include 與 exclude。

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

2. exclude：任何名稱匹配的組件都不會被緩存。

 二者都可以用逗號分隔字符串、正則表達(dá)式或一個(gè)數(shù)組來表示。

<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>

所以，結(jié)合 <keep-alive> 的 include 或 exclude屬性，我們就可以輕易的選擇需要緩存的組件。

<keep-alive include="system">
  <router-view></router-view>
</keep-alive>

這樣我們就可以只緩存「設(shè)置頁」，然后實(shí)現(xiàn)保留上次選擇的 Tab 頁。

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