Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке <keep-alive>?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`<keep-alive>`** - це спеціальний вбудований компонент Vue, який кешує стан і DOM компонентів, щоб при повторному відображенні вони не пересоздавалися, а відновлювалися з пам'яті. **Ключове:** він робить компонент "живим", навіть якщо той тимчасово прибраний з екрана - компонент не знищується, а тільки приховується.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`<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()` Компонент прихований, але *не знищений*. Приклад: ```js 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> ``` Дуже прискорює переходи між роутами.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.