keep-alive

Props:

• include — строка, регулярное выражение или массив. Только компоненты с совпадающими именами будут кешироваться.

• exclude — строка, регулярное выражение или массив. Все компоненты с совпадающими именами не будут кешироваться.

• max - число. Максимальное количество кэшируемых экземпляров.

Использование:

Оберните динамические компоненты тегом <keep-alive>, чтобы кешировать экземпляры интерактивных компонентов вместо того, чтобы их уничтожать. Так же, как и <transition>, <keep-alive> — абстрактный компонент: при отрисовке он не превращается в элемент DOM, и не показывается в цепочке родителей компонента.

Когда компонент, расположенный внутри <keep-alive> показывается или скрывается, вызываются его хуки жизненного цикла activated или deactivated соответственно.

В версии 2.2.0+, activated и deactivated будет срабатывать для всех вложенных компонентов внутри <keep-alive> дерева.

В основном используется для сохранения состояния компонента, чтобы избежать повторной отрисовки.

<!-- базовый вариант -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- несколько потомков -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- использование вместе с `<transition>` -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

Обратите внимание, <keep-alive> предназначен для случая, когда есть один прямой дочерний компонент, который переключается. Он не будет работать, если в нём есть v-for. При наличии несколько дочерних компонентов отображаемых по условию, как указано выше, <keep-alive> требует, чтобы отображался только один дочерний компонент в один момент времени.

include и exclude

Входные параметры include и exclude позволяют организовать условное кеширование компонентов. Оба параметра можно указать в виде строки со списком имён компонентов через запятую, регулярным выражением или массивом:

<!-- строка с именами через запятую -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

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

<!-- массив (используйте `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

Проверяется сначала собственное значение опции name компонента, а в случае его недоступности — имя, указанное при локальной регистрации (ключ в опции components компонента-родителя). Анонимные компоненты таким образом проверить не получится.

max

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

<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

<keep-alive> не работает с функциональными компонентами, так как у них отсутствуют экземпляры.