一、引言

Vue.js是一款流行的前端框架，它提供了許多方便的特性來(lái)幫助我們構(gòu)建交互式的用戶界面。其中一個(gè)重要的特性是Keep-Alive組件，它可以在組件切換時(shí)保持組件的狀態(tài)，從而提升用戶體驗(yàn)。

二、什么是KeepAlive

在Vue中，KeepAlive組件是一種特殊的組件，用于緩存已經(jīng)渲染過(guò)的組件實(shí)例。它可以將組件保存在內(nèi)存中，以避免每次重新渲染組件時(shí)都執(zhí)行組件的生命周期鉤子函數(shù)和重新渲染DOM的開(kāi)銷。

官網(wǎng)原話: <KeepAlive>是一個(gè)內(nèi)置組件，它的功能是在多個(gè)組件間動(dòng)態(tài)切換時(shí)緩存被移除的組件實(shí)例。

三、KeepAlive的基本用法

KeepAlive組件是Vue的內(nèi)置組件，通過(guò)將其包裹在需要緩存的組件外部，可以實(shí)現(xiàn)組件狀態(tài)的保留。

<template>
  <KeepAlive>
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

上面的代碼示例是通過(guò)Vue的<component>元素和特殊的is屬性實(shí)現(xiàn)的，可以使用:is屬性來(lái)指定要渲染的組件。:is屬性的值可以是一個(gè)組件的選項(xiàng)對(duì)象，也可以是一個(gè)組件的名稱。

<component>是一個(gè)動(dòng)態(tài)組件，根據(jù)currentComponent的值來(lái)動(dòng)態(tài)加載不同的子組件。

四、緩存和銷毀

默認(rèn)情況下，KeepAlive會(huì)緩存所有傳遞給它的組件實(shí)例，但你可以通過(guò)使用include和exclude屬性來(lái)明確指定哪些組件需要緩存或排除。

<template>
  <KeepAlive :include="['ComponentA']" :exclude="['ComponentB']">
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>

在上面的代碼示例中，ComponentA會(huì)被緩存，而ComponentB不會(huì)。

通過(guò):include屬性，我們可以指定需要緩存的組件，這里使用了數(shù)組['ComponentA']來(lái)指定只緩存ComponentA組件的實(shí)例。

通過(guò):exclude屬性，我們可以指定不需要緩存的組件，這里使用了數(shù)組['ComponentB']來(lái)指定不緩存ComponentB組件的實(shí)例。

<!-- 以英文逗號(hào)分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>
<!-- 正則表達(dá)式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>
<!-- 數(shù)組 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

KeepAlive組件的include屬性可以接收一個(gè)字符串、正則表達(dá)式或一個(gè)數(shù)組，用于指定哪些組件需要被緩存。

• 字符串：可以是組件的名稱，用于指定具體的組件需要被緩存。
• 正則表達(dá)式：可以使用正則表達(dá)式來(lái)匹配組件的名稱，所有匹配成功的組件都會(huì)被緩存。
• 數(shù)組：可以包含多個(gè)組件名稱，用于指定多個(gè)組件需要被緩存。

五、最大緩存實(shí)例數(shù)

我們可以通過(guò)傳入max值來(lái)限制可被緩存的最大組件實(shí)例數(shù)。

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

在上述的代碼示例中，如果組件實(shí)例數(shù)超過(guò)10個(gè)時(shí)(超出了指定的最大數(shù)量)，就按LRU算法將最長(zhǎng)時(shí)間沒(méi)被訪問(wèn)的緩存實(shí)例銷毀，來(lái)為新的實(shí)例騰出空間。

六、配合動(dòng)態(tài)組件使用

KeepAlive特別適用于動(dòng)態(tài)組件的場(chǎng)景，它可以保留動(dòng)態(tài)組件的狀態(tài)，讓用戶在不同組件之間切換時(shí)保持良好的交互體驗(yàn)。

<template>
  <KeepAlive>
    <component :is="currentComponent"></component>
  </KeepAlive>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  }
}
</script>

通過(guò):is="currentComponent"，我們動(dòng)態(tài)地渲染不同的組件。

currentComponent是一個(gè)數(shù)據(jù)屬性，初始值為'ComponentA'，表示要渲染的組件是ComponentA。通過(guò)改變currentComponent的值，我們可以在運(yùn)行時(shí)切換渲染不同的組件，從而實(shí)現(xiàn)動(dòng)態(tài)組件的切換效果。

七、KeepAlive組件的生命周期

KeepAlive組件有自己的生命周期鉤子函數(shù)，可以在需要時(shí)進(jìn)行操作。一個(gè)持續(xù)存在的組件可以通過(guò)onActivated()和onDeactivated()注冊(cè)相應(yīng)的兩個(gè)狀態(tài)的生命周期鉤子。

• onActivated：當(dāng)組件被激活時(shí)調(diào)用，對(duì)應(yīng)Vue組件的onActivated鉤子函數(shù)。
• onDeactivated：當(dāng)組件被停用時(shí)調(diào)用，對(duì)應(yīng)Vue組件的onDeactivated鉤子函數(shù)。

當(dāng)一個(gè)組件實(shí)例從DOM上移除但因?yàn)楸?code><KeepAlive>緩存而仍作為組件樹(shù)的一部分時(shí)，它將變?yōu)椴换钴S狀態(tài)而不是被卸載。當(dāng)一個(gè)組件實(shí)例作為緩存樹(shù)的一部分插入到DOM中時(shí)，它將重新被激活。

<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
  // 在組件被激活時(shí)執(zhí)行的操作
  // 調(diào)用時(shí)機(jī)為首次掛載
  // 以及每次從緩存中被重新插入時(shí)
})
onDeactivated(() => {
  // 在組件失效時(shí)執(zhí)行的操作
  // 在從 DOM 上移除、進(jìn)入緩存
  // 以及組件卸載時(shí)調(diào)用
})
</script>

onActivated在組件掛載時(shí)也會(huì)調(diào)用，并且onDeactivated在組件卸載時(shí)也會(huì)調(diào)用。這兩個(gè)鉤子不僅適用于KeepAlive緩存的根組件，也適用于緩存樹(shù)中的后代組件。

八、舉個(gè)例子

讓我們通過(guò)一個(gè)實(shí)際的案例來(lái)演示KeepAlive的使用。假設(shè)我們有一個(gè)選項(xiàng)卡切換的頁(yè)面，每個(gè)選項(xiàng)卡對(duì)應(yīng)一個(gè)組件。

<template>
  <div>
    <button @click="toggleTab('TabA')">Tab A</button>
    <button @click="toggleTab('TabB')">Tab B</button>
    <KeepAlive>
      <component :is="currentTab"></component>
    </KeepAlive>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentTab: 'ComponentA'
    };
  },
  methods: {
    toggleTab(tab) {
      this.currentTab = tab;
    }
  }
}
</script>

在<KeepAlive>標(biāo)簽中，我們使用了動(dòng)態(tài)組件來(lái)根據(jù)currentTab的值來(lái)動(dòng)態(tài)渲染不同的組件。

toggleTab方法用于切換當(dāng)前的選項(xiàng)卡。當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)調(diào)用該方法，并將對(duì)應(yīng)的選項(xiàng)卡名稱作為參數(shù)傳入。該方法會(huì)將currentTab的值更新為傳入的選項(xiàng)卡名稱，從而實(shí)現(xiàn)動(dòng)態(tài)切換選項(xiàng)卡的效果。

九、最后的話

KeepAlive是Vue提供的一個(gè)強(qiáng)大工具，能夠顯著提升應(yīng)用程序的性能和用戶體驗(yàn)。通過(guò)合理地運(yùn)用KeepAlive，我們可以在保持組件狀態(tài)的同時(shí)，提供快速、流暢的用戶界面切換效果。

如果對(duì)Vue中的插槽(slot)有不清楚，可以去看這篇 Vue中的插槽(Slot)技術(shù)詳解!

到此這篇關(guān)于詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件的文章就介紹到這了,更多相關(guān)Vue KeepAlive組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論