KeepAlive ​

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

Базовое использование ​

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

<component :is="activeComponent" />

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

В приведенном ниже примере у нас есть два компонента с состоянием: компонент A содержит счетчик, а компонент B содержит сообщение, синхронизированное с введенным значением через 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 cache: если количество закэшированных экземпляров вот-вот превысит указанное максимальное количество, то наименее недавно использованный закэшированный экземпляр будет уничтожен, чтобы освободить место для нового.

<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>