之前在《Vue一個案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)》這篇文章中簡單提到過組件的緩存。當時只是簡單的提供了一個解決問題的思路，并沒有說到多少組件緩存的東西，今天我們就來詳細說說組件的緩存。

組件化開發(fā)模式下，我們會把整個項目拆分成很多組件，然后按照合理的方式組織起來。

自然就存在組件之間的切換問題，Vue 中有個「動態(tài)組件」的概念，它能夠讓我們更好的實現(xiàn)組件的切換。

在實際的項目開發(fā)中，產(chǎn)品是不可能放過我們的，需求總是在不停的變化，如果你碰到那些不改需求的產(chǎn)品就嫁了吧，太難得了。

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

首先我們可以使用內(nèi)置組件 <component>實現(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>

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

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

keep-alive

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

值得注意的是 「動態(tài)組件」這四個字，它只有在包含動態(tài)組件時，才會產(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>

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

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

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

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

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

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

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

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

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

原因是因為 <keep-alive> 提供了兩個屬性 include 與 exclude。

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

 二者都可以用逗號分隔字符串、正則表達式或一個數(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è)置頁」，然后實現(xiàn)保留上次選擇的 Tab 頁。

以上所述是小編給大家介紹的Vue中組件的緩存詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論