# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://d-ukolov.gitbook.io/vue/komponenty/dinamicheskie-i-asinkhronnye-komponenty/keep-alive.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.