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

組件化開(kāi)發(fā)模式下，我們會(huì)把整個(gè)項(xiàng)目拆分成很多組件，然后按照合理的方式組織起來(lái)。

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

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

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

首先我們可以使用內(nèi)置組件 <component>實(shí)現(xiàn)動(dòng)態(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è)組件之間的切換，但動(dòng)態(tài)組件在切換的過(guò)程中，組件的實(shí)例都是「重新創(chuàng)建」的，而我們需要保留組件狀態(tài)。

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

keep-alive

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

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

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

既然如此，我們來(lái)看看 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>

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

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

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

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

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

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

1. include：只有名稱(chēng)匹配的組件會(huì)被緩存。
2. exclude：任何名稱(chēng)匹配的組件都不會(huì)被緩存。

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

<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è)置頁(yè)」，然后實(shí)現(xiàn)保留上次選擇的 Tab 頁(yè)。

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

最新評(píng)論