KeepAlive ​

<KeepAlive> je vestavěná komponenta, která nám umožňuje podmíněně ukládat instance komponent do cache při dynamickém přepínání mezi více komponentami.

Základní použití ​

V kapitole Základy komponent jsme představili syntaxi pro Dynamické komponenty s použitím speciálního elementu <component>:

<component :is="activeComponent" />

Ve výchozím nastavení bude instance aktivní komponenty odpojena (unmounted), když se z ní přesunete jinam. To způsobí ztrátu jakýchkoli změn stavu, které si drží. Když se tato komponenta znovu zobrazí, vytvoří se nová instance čistě ve výchozím stavu.

V příkladu níže máme dvě stavové komponenty – A obsahuje počítadlo, zatímco B obsahuje zprávu synchronizovanou s uživatelským vstupem přes v-model. Zkuste aktualizovat stav jedné z nich, přepněte na druhou a poté se do ní přepněte zpátky:

Uvidíte, že po přepnutí zpět byl předchozí změněný stav resetován.

Vytváření nové instance komponenty po přepnutí je normálně užitečné chování, ale v tomto případě bychom opravdu rádi, aby byly tyto dvě instance komponent zachovány, i když jsou neaktivní. Abychom tento problém vyřešili, můžeme naši dynamickou komponentu zabalit do vestavěné komponenty <KeepAlive>:

<!-- neaktivní komponenty budou umístěny do cache -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Nyní bude mezi přepínáním komponent stav zachován:

Include / Exclude ​

Ve výchozím nastavení <KeepAlive> bude do cache umisťovat každou komponentu uvnitř. Můžeme toto chování upravit pomocí vlastností (props) include a exclude. Obě vlastnosti mohou být řetězce oddělené čárkami, regulární výraz nebo pole obsahující libovolné hodnoty obou typů:

<!-- řetězce oddělené čárkami -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (použijte `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- pole (použijte `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

Shoda je porovnávána s atributem name komponenty, takže ty, které je třeba podmíněně uložit do cache pomocí KeepAlive, musí atribut name explicitně deklarovat.

Maximální počet cached instancí ​

Můžeme omezit maximální počet instancí komponent, které lze uložit do cache pomocí vlastnosti max. Když je zadáno max, <KeepAlive> se chová jako LRU cache: pokud by měl počet instancí uložených v cache překročit zadaný maximální počet, bude nejdéle nepoužívaná instance v cache zničena, aby se pro novou uvolnilo místo.

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

Životní cyklus cached instance ​

Když je instance komponenty odstraněna z DOM, ale je součástí stromu komponent uloženého v cache prostřednictvím <KeepAlive>, přejde místo unmounted do stavu deactivated. Když je instance komponenty vložena do DOM jako součást stromu komponent uloženého v cache, stane se activated.

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // zavolá se při úvodním připojení (mounted)
  // a pokaždé, když je komponenta znovu vložena z cache
})

onDeactivated(() => {
  // zavolá se při odebrání z DOM a uložení do cache
  // a také při odpojení (unmounted)
})
</script>

export default {
  activated() {
    // zavolá se při úvodním připojení (mounted)
    // a pokaždé, když je komponenta znovu vložena z cache
  },
  deactivated() {
    // zavolá se při odebrání z DOM a uložení do cache
    // a také při odpojení (unmounted)
  }
}

Pamatujte, že:

• onActivatedactivated se také volá při úvodním připojení (mounted), a onDeactivateddeactivated při závěrečném odpojení (unmounted).

• Oba lifecycle hooks fungují nejen pro root komponentu uloženou v cache <KeepAlive>, ale také pro komponenty potomků v uloženém stromu komponent.

Související

• API reference pro <KeepAlive>