KeepAlive ​

<KeepAlive> jest wbudowanym komponentem, który pozwala nam warunkowo przechowywać w pamięci podręcznej instancje komponentów podczas dynamicznego przełączania między wieloma komponentami.

Podstawowe użycie ​

W rozdziale Podstawy Komponentów przedstawiliśmy składnię Komponentów Dynamicznych, używając specjalnego elementu <component>:

<component :is="activeComponent" />

Domyślnie, aktywna instancja komponentu zostanie odmontowana podczas przełączenia się z niego. Spowoduje to utratę wszystkich zmienionych stanów, które przechowuje. Kiedy komponent zostanie wyświetlony ponownie, zostanie utworzona nowa instancja zawierająca tylko stan początkowy.

W poniższym przykładzie mamy dwa komponenty ze stanem - A zawiera licznik, podczas gdy B zawiera wiadomość zsynchronizowaną z polem input za pomocą v-model. Spróbuj zaktualizować stan jednego z nich, przełącz się na inny, a następnie wróć do poprzedniego:

Zauważysz, że po powrocie, poprzednio zmieniony stan zostanie zresetowany.

Tworzenie nowej instancji komponentu przy przełączaniu jest zwykle przydatnym zachowaniem, ale w tym przypadku, chcielibyśmy, aby dwie instancje komponentów były zachowane nawet gdy są nieaktywne. Aby rozwiązać ten problem, możemy owinąć nasz dynamiczny komponent we wbudowany komponent <KeepAlive>:

<!-- Nieaktywne komponenty zostaną zachowane w pamięci podręcznej! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Teraz stan będzie zachowany podczas przełączania komponentów:

Include / Exclude ​

Domyślnie <KeepAlive> będzie buforować każdą instancję komponentu znajdującą się wewnątrz. Możemy dostosować to zachowanie za pomocą właściwości include i exclude. Obie właściwości mogą być ciągiem znaków rozdzielonym przecinkami, wyrażeniem regularnym RegExp lub tablicą zawierającą dowolny z tych typów:

<!-- ciąg znaków rozdzielony przecinkiem -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- wyrażenie regularne (użyte wiązanie `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Tablica (użyte wiązanie `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

Dopasowanie jest sprawdzane względem opcji name komponentu, więc komponenty, które mają być warunkowo buforowane przez KeepAlive muszą jawnie zadeklarować opcję name.

Maksymalna liczba buforowanych instancji ​

Możemy ograniczyć maksymalną liczbę instancji komponentów, które mogą być buforowane za pomocą właściwości max. Kiedy max jest określone, <KeepAlive> zachowuje się jak pamięć podręczna LRU: jeśli liczba buforowanych instancji ma przekroczyć określoną maksymalną wartość, najmniej ostatnio używana buforowana instancja zostanie zniszczona, aby zrobić miejsce dla nowej.

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

Cykl życia buforowanej instancji ​

Kiedy instancja komponentu jest usuwana z DOM, ale jest częścią drzewa komponentów buforowanego przez <KeepAlive>, przechodzi w stan dezaktywacji zamiast zostać odmontowana. Kiedy instancja komponentu jest wstawiana do DOM jako część buforowanego drzewa, zostaje aktywowana.

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

onActivated(() => {
  // wywołane przy początkowym montowaniu
  // i za każdym razem gdy jest ponownie wstawiony z bufora
})

onDeactivated(() => {
  // wywołane gdy usunięte z DOM do bufora
  // oraz przy odmontowaniu
})
</script>

export default {
  activated() {
    // wywołane przy początkowym montowaniu
    // i za każdym razem gdy jest ponownie wstawiony z bufora
  },
  deactivated() {
    // wywołane gdy usunięte z DOM do bufora
    // oraz przy odmontowaniu
  }
}

Należy zauważyć, że:

• onActivatedactivated jest również wywoływane przy montowaniu, a onDeactivateddeactivated przy odmontowaniu.

• Oba hooki działają nie tylko dla głównego komponentu buforowanego przez <KeepAlive>, ale także dla komponentów potomnych w buforowanym drzewie.

Powiązanie

• Dokumentacja API <KeepAlive>