KeepAlive ​

<KeepAlive> — это встроенный компонент, который позволяет нам условно кэшировать экземпляры компонентов при динамическом переключении между несколькими компонентами.

Пример использования ​

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

<component :is="activeComponent" />

По умолчанию активный экземпляр компонента будет размонтирован при переключении с него. Это приведет к потере всех изменённых состояний. При повторном отображении этого компонента будет создан новый экземпляр, содержащий только начальное состояние.

В примере ниже у нас есть два компонента с состоянием — A содержит счётчик, а B — сообщение, синхронизированное с входом через v-model. Попробуйте обновить состояние одного из них, переключиться, а затем снова переключиться на него:

Вы заметите, что при обратном переключении предыдущее изменённое состояние будет сброшено.

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

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

Теперь состояние будет сохраняться во всех переключателях компонентов:

Include / Exclude ​

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

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

<!-- regex (используем `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Array (используем `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>, он переходит в состояние deactivated вместо того, чтобы быть размонтированным. Когда экземпляр компонента вставляется в DOM как часть кэшированного дерева, он активируется.

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

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

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

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

Обратите внимание, что:

• onActivatedactivated также вызывается при монтировании, как и onDeactivateddeactivated при размонтировании.

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

Ссылки по теме

• Справочник по API <KeepAlive>