KeepAlive ​

<KeepAlive> — це вбудований компонент, який дозволяє умовно кешувати екземпляри компонентів під час динамічного перемикання між декількома компонентами.

Основне використання ​

У розділі «Основи компонентів» ми представили синтаксис для динамічних компонентів, використовуючи спеціальний елемент <component>:

<component :is="activeComponent" />

За промовчанням екземпляр активного компонента буде демонтовано, якщо його вимкнути. Це призведе до втрати будь-якого зміненого стану. Коли цей компонент буде показано знову, буде створено новий екземпляр лише з початковим станом.

У наведеному нижче прикладі ми маємо два компоненти зі збереженням стану: A містить лічильник, а Б містить повідомлення, синхронізоване з введенням через v-model. Спробуйте оновити стан одного з них, вимкніться, а потім поверніться до нього:

Ви помітите, що після перемикання назад попередній змінений стан було б скинуто.

Створення нового екземпляра компонента є корисною поведінкою, але в цьому випадку ми дійсно хотіли б, щоб два екземпляри компонента зберігалися, навіть якщо вони неактивні. Щоб вирішити цю проблему, ми можемо обернути наш динамічний компонент вбудованим компонентом <KeepAlive>:

<!-- Неактивні компоненти будуть кешовані! -->
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>

Тепер стан буде збережено для компонентів:

Включити / Виключити ​

За замовчуванням <KeepAlive> кешуватиме будь-який екземпляр компонента всередині. Ми можемо налаштувати цю поведінку за допомогою атрибутів include і exclude. Обидва атрибути можуть бути рядком із розділеними комами, RegExp або масивом, що містить один із типів:

<!-- рядок, розділений комами -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- регулярний вираз (використовуйте `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Масив (використовуйте `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

Збіг перевіряється з параметром name компонента, тому компоненти, які потрібно умовно кешувати за допомогою KeepAlive, повинні явно оголосити параметр name.

Максимальна кількість кешованих екземплярів ​

Ми можемо обмежити максимальну кількість екземплярів компонентів, які можна кешувати, за допомогою властивості max. Якщо вказано max, <KeepAlive> поводиться як кеш LRU: якщо кількість кешованих екземплярів приблизно щоб перевищити вказану максимальну кількість, кешований екземпляр, до якого нещодавно зверталися, буде знищено, щоб звільнити місце для нового.

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

Життєвий цикл кешованого екземпляра ​

Коли екземпляр компонента видаляється з DOM, але є частиною дерева компонентів, кешованого <KeepAlive>, він переходить у деактивований стан замість того, щоб бути демонтованим. Коли екземпляр компонента вставляється в DOM як частину кешованого дерева, він активується.

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

onActivated(() => {
  // викликається під час початкового монтування
  // і кожного разу, коли він повторно вставляється з кешу
})

onDeactivated(() => {
  // викликається при видаленні з DOM у кеш
  // а також коли розмонтуванні
})
</script>

export default {
  activated() {
    // викликається під час початкового монтування
    // і кожного разу, коли він повторно вставляється з кешу
  },
  deactivated() {
    // викликається при видаленні з DOM у кеш
    // а також коли розмонтуванні
  }
}

Зауважте:

• onActivatedactivated також викликається під час монтування, а onDeactivateddeactivated під час демонтування.

• Обидва хуки працюють не лише для кореневого компонента, кешованого <KeepAlive>, але й для компонентів-нащадків у кешованому дереві.

Пов'язані

• Посилання на API <KeepAlive>