KeepAlive ​

<KeepAlive> è un Componente nativo che, in modo condizionale, ci permette di memorizzare nella cache le istanze dei componenti quando si passa dinamicamente tra diversi componenti.

Utilizzo Base ​

Nel capitolo Nozioni base sui Componenti, abbiamo introdotto la sintassi per i Componenti Dinamici, utilizzando l'elemento speciale <component>:

<component :is="activeComponent" />

Di default, un'istanza di componente attiva verrà smontata quando si passa ad un'altra. Ciò causerà la perdita di qualsiasi stato modificato che essa contiene. Quando questo componente viene visualizzato di nuovo, verrà creata una nuova istanza con solo lo stato iniziale.

Nell'esempio qui sotto, abbiamo due componenti stateful: A contiene un contatore, mentre B contiene un messaggio sincronizzato con un input tramite v-model. Prova ad aggiornare lo stato di uno di essi, passa ad un altro, e poi torna di nuovo sul precedente:

Noterai che quando ritorni, lo stato precedentemente modificato sarà stato reimpostato.

Di solito, creare una nuova istanza di componente allo switch è un comportamento utile, ma, in questo caso, vorremmo che le due istanze dei componenti vengano conservate anche quando sono inattive. Per risolvere questo problema possiamo racchiudere il nostro componente dinamico con il componente nativo <KeepAlive>:

<!-- I componenti inattivi saranno memorizzati nella cache! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Ora, lo stato verraà conservato durante lo switch dei componenti:

Includi / Escludi ​

Di default <KeepAlive> memorizzerà nella cache qualsiasi istanza del componente al suo interno. Possiamo personalizzare questo comportamento tramite le props include ed exclude. Entrambe le prop possono accettare una stringa separata da virgole, una RegExp, o un array contenente entrambi i tipi:

<!-- stringa separata da virgole -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

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

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

La corrispondenza viene verificata contro l'opzione name del componente, quindi i componenti che devono essere memorizzati nella cache in modo condizionale da KeepAlive devono dichiarare esplicitamente un'opzione name.

Numero Massimo di Istanze Memorizzate ​

Possiamo limitare il numero massimo di istanze del componente che possono essere memorizzate nella cache tramite la prop max. Quando max è specificata, <KeepAlive> si comporta come una cache LRU: se il numero di istanze memorizzate nella cache sta per superare il conteggio massimo specificato, l'istanza meno recente, memorizzata nella cache, verrà distrutta per fare spazio a quella nuova.

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

Ciclo di Vita dell'Istanza in Cache ​

Quando un'istanza di componente viene rimossa dal DOM ma fa parte di un albero di componenti memorizzato nella cache da <KeepAlive>, entra in uno stato disattivato invece di essere smontata (unmounted). Quando un'istanza di componente viene inserita nel DOM come parte di un albero memorizzato nella cache, essa viene attivata.

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

onActivated(() => {
  // chiamato al mount iniziale
  // e ogni volta che è inserito nuovamente dalla cache
})

onDeactivated(() => {
  // chiamato quando rimosso dal DOM e inserito in cache
  // e anche quando viene unmounted
})
</script>

export default {
  activated() {
  // chiamato al mount iniziale
  // e ogni volta che è inserito nuovamente dalla cache
  },
  deactivated() {
  // chiamato quando rimosso dal DOM e inserito in cache
  // e anche quando viene unmounted
  }
}

Nota che:

• onActivatedactivated viene chiamato anche al mount, e onDeactivateddeactivated all'unmount.

• Entrambi gli hook funzionano non solo per il componente radice memorizzato nella cache da <KeepAlive>, ma anche per i componenti discendenti nell'albero memorizzato nella cache.

Correlati

• Referenza API <KeepAlive>