Що таке <keep-alive>?

VueJunior~1 хв читання

<keep-alive> - це спеціальний вбудований компонент Vue, який дозволяє кешувати стан і DOM компонентів, щоб при повторному відображенні вони не пересоздавалися, а відновлювалися з пам'яті.

Простіше кажучи:

<keep-alive> робить компонент "живим", навіть якщо він тимчасово прибраний з екрана. Він не знищується, а тільки приховується.

Це один з найважливіших інструментів оптимізації.

Навіщо потрібен `<keep-alive>`?

Зазвичай, коли компонент приховується через v-if:

він видаляється з DOM,
викликається unmounted,
втрачаються дані і стан.

Наприклад, перемикання вкладок:

Tab A -> Tab B -> Tab A

Якщо компонент не кешувати, він створюється з нуля щоразу. Це погано, якщо всередині:

важкі обчислення
форми із заповненими даними
сторонні плагіни
стан, який потрібно зберігати

<keep-alive> вирішує це.

Приклад використання

html

<keep-alive>
  <ComponentA v-if="showA" />
</keep-alive>

Тепер:

компонент буде створений один раз
при прихованні не знищується, а "засинає"
при повторному показі відновлюється миттєво

Життєвий цикл з keep-alive

Компонент отримує два спеціальних хуки:

`activated()`

Компонент знову запрацював (показаний).

`deactivated()`

Компонент прихований, але не знищений.

Приклад:

export default {
  activated() {
    console.log("Компонент активовано");
  },
  deactivated() {
    console.log("Компонент прихований");
  }
}

Фільтрація компонентів (include / exclude)

Можна вказати, які компоненти кешувати:

html

<keep-alive include="UserPage,ProfilePage">
  <component :is="currentPage" />
</keep-alive>

include / exclude приймають:

рядок: "CompA,CompB"
масив: ['CompA', 'CompB']
RegExp: /^Admin/

Обмеження розміру кешу - `max`

html

<keep-alive :max="5">
  <component :is="currentPage" />
</keep-alive>

Vue зберігає тільки останні 5 компонентів, інші видаляються.

Коли не варто використовувати `<keep-alive>`?

коли компонент залежить від URL (наприклад, сторінки в роутері)
коли потрібно виконувати код при кожному вході в компонент (наприклад, оновлення даних)
коли компонент занадто важкий, і його кешування займатиме багато пам'яті

Використання з Vue Router

Класика - кешування сторінок:

html

<keep-alive>
  <router-view />
</keep-alive>

Дуже прискорює переходи між роутами.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.