Що робить KeepAlive і які в нього підводні камені?

Коли компонент зникає з екрана (перемкнули вкладку, v-if став false, змінився маршрут), Vue знищує його екземпляр: стан, введені дані, позиція прокрутки губляться. При поверненні компонент створюється заново.

<KeepAlive> кешує екземпляри компонентів замість знищення:

<KeepAlive :include="['OrdersTab', 'ReportsTab']" :max="5">
  <component :is="currentTab" />
</KeepAlive>

Перемкнулися з вкладки «Замовлення» на «Звіти» й назад - фільтри, введений пошук і завантажені дані на місці.

Параметри:

• include / exclude - які компоненти кешувати (за назвою компонента: у <script setup> - назва файлу чи defineOptions({ name }));
• max - скільки екземплярів тримати; при переповненні витісняється найдавніше використаний.

З маршрутизатором:

<RouterView v-slot="{ Component }">
  <KeepAlive>
    <component :is="Component" />
  </KeepAlive>
</RouterView>

Хуки кешованого компонента: onActivated і onDeactivated - замість onMounted/onUnmounted, які при показі з кешу не викликаються.

Підводні камені:

• застарілі дані: компонент з кешу показує дані з моменту, коли його сховали. Оновлювати їх треба в onActivated, інакше користувач бачить замовлення годинної давнини;
• пам'ять: кожен кешований екземпляр тримає свій стан, DOM і дані. Без max і include кеш росте з кожною новою сторінкою - особливо з маршрутами виду /orders/:id, де кожен id - окремий запис кешу;
• побічні ефекти продовжують працювати: таймери, підписки на WebSocket, обробники на window у прихованому компоненті живуть далі. Їх треба призупиняти в onDeactivated;
• ключі маршрутів: кешування сторінки з параметром може показати дані попереднього id, якщо компонент перевикористовується - потрібен :key чи реакція на зміну параметра.

Коли не потрібен: якщо стан простіше зберегти в Pinia чи URL (фільтри, номер сторінки) - це надійніше й не тримає цілий компонент у пам'яті.

Докладніше в документації: KeepAlive