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>