Keepalive у Vue.js

Що таке KeepAlive?

<KeepAlive> — це вбудований компонент Vue, який кешує екземпляри компонентів, коли їх вимикають, замість того, щоб знищувати їх. Це зберігає їх стан і уникає повторного монтування.

Без KeepAlive

vue

<template>
  <button @click="tab = 'a'">Tab A</button>
  <button @click="tab = 'b'">Tab B</button>

  <!-- Компонент ЗНИЩУЄТЬСЯ при перемиканні, стан ВТРАЧАЄТЬСЯ -->
  <TabA v-if="tab === 'a'" />
  <TabB v-if="tab === 'b'" />
</template>

З KeepAlive

vue

<template>
  <button @click="tab = 'a'">Tab A</button>
  <button @click="tab = 'b'">Tab B</button>

  <!-- Компонент КЕШУЄТЬСЯ при перемиканні, стан ЗБЕРІГАЄТЬСЯ -->
  <KeepAlive>
    <component :is="tab === 'a' ? TabA : TabB" />
  </KeepAlive>
</template>

Включити / Виключити

Контролюйте, які компоненти кешуються:

vue

<!-- Кешувати лише компоненти з іменами TabA та TabB -->
<KeepAlive include="TabA,TabB">
  <component :is="currentTab" />
</KeepAlive>

<!-- Кешувати всі, крім Settings -->
<KeepAlive exclude="Settings">
  <component :is="currentTab" />
</KeepAlive>

<!-- Використовуючи регулярні вирази -->
<KeepAlive :include="/^Tab/">
  <component :is="currentTab" />
</KeepAlive>

Максимальна кількість кешованих екземплярів

vue

<!-- Зберігати лише 5 найчастіше використовуваних компонентів -->
<KeepAlive :max="5">
  <component :is="currentTab" />
</KeepAlive>

Коли ліміт перевищено, найменш нещодавно використовуваний екземпляр знищується.

Хуки життєвого циклу

KeepAlive вводить два спеціальних хуки життєвого циклу:

vue

<script setup>
import { onActivated, onDeactivated } from 'vue'

// Викликається, коли компонент вставляється в DOM з кешу
onActivated(() => {
  console.log('Компонент активовано — оновити дані?')
  fetchLatestData()
})

// Викликається, коли компонент видаляється з DOM, але зберігається в кеші
onDeactivated(() => {
  console.log('Компонент деактивовано — призупинити таймери?')
  clearInterval(timer)
})
</script>

З Vue Router

vue

<!-- App.vue — кешувати компоненти маршрутів -->
<template>
  <RouterView v-slot="{ Component }">
    <KeepAlive include="Home,Dashboard">
      <component :is="Component" />
    </KeepAlive>
  </RouterView>
</template>

Варіант використання	Перевага
Навігація по вкладках	Зберігає введення форм, позицію прокрутки
Багатоступеневі форми	Користувач не втрачає прогрес
Список → Деталі → Назад	Позиція прокрутки списку зберігається
Панелі приладної дошки	Дорогі компоненти залишаються в кеші

<KeepAlive> кешує екземпляри компонентів замість їх знищення, зберігаючи стан між перемиканнями. Використовуйте include/exclude для контролю кешування, :max для обмеження пам'яті, а також хуки onActivated/onDeactivated для логіки оновлення. Це важливо для інтерфейсів вкладок та UX навігації назад.

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

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

Premium

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

Дочитали статтю?

Практика завдань