> For the complete documentation index, see [llms.txt](https://d-ukolov.gitbook.io/vue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://d-ukolov.gitbook.io/vue/komponenty/dinamicheskie-i-asinkhronnye-komponenty/keep-alive.md).

# keep-alive

**Props:**

* `include` — строка, регулярное выражение или массив. Только компоненты с совпадающими именами будут кешироваться.
* `exclude` — строка, регулярное выражение или массив. Все компоненты с совпадающими именами не будут кешироваться.
* `max` - число. Максимальное количество кэшируемых экземпляров.

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

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

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

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

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

```markup
<!-- базовый вариант -->
<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` позволяют организовать условное кеширование компонентов. Оба параметра можно указать в виде строки со списком имён компонентов через запятую, регулярным выражением или массивом:

```markup
<!-- строка с именами через запятую -->
<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`**

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

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

{% hint style="info" %}
`<keep-alive>` не работает с функциональными компонентами, так как у них отсутствуют экземпляры.
{% endhint %}