Кеширование компонентов

В Vue Router кеширование компонентов является важным аспектом оптимизации производительности и управления состоянием приложения. Когда маршруты переключаются, Vue по умолчанию уничтожает предыдущий компонент и создает новый при повторном посещении маршрута. Это может привести к потере данных формы, состояния UI и лишним перерендериваниям. Для решения этой задачи используется механизм кеширования компонентов с помощью встроенных инструментов Vue.

Директива `<keep-alive>`

Ключевой инструмент для кеширования — компонент <keep-alive>. Он оборачивает динамические компоненты и сохраняет их состояние в памяти при навигации.

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

Особенности использования:

<router-view> является точкой вставки компонентов маршрутов, и оборачивание его в <keep-alive> позволяет сохранять уже загруженные компоненты.
Компоненты, обернутые в <keep-alive>, сохраняют состояние своих данных, вычисляемых свойств и DOM.
При возвращении на кешированный маршрут Vue повторно использует существующий экземпляр компонента, вместо создания нового.

Атрибуты `<keep-alive>`

Для более точного контроля кеширования используются атрибуты include и exclude.

<keep-alive include="Home,About" exclude="Contact">
  <router-view />
</keep-alive>

include — перечисляет имена компонентов, которые нужно кешировать. Поддерживаются строки, массивы и регулярные выражения.
exclude — перечисляет компоненты, которые не должны кешироваться.
Имена компонентов берутся из опции name при определении компонента:

export default {
  name: 'Home',
  data() {
    return { message: 'Привет, мир!' };
  }
};

Управление кешированием с помощью жизненных хуков

Vue предоставляет специальные хуки, которые взаимодействуют с кешем:

activated — вызывается, когда компонент повторно активируется из кеша.
deactivated — вызывается, когда компонент временно деактивирован и помещен в кеш.

Пример:

export default {
  name: 'Profile',
  data() {
    return { visits: 0 };
  },
  activated() {
    this.visits++;
    console.log('Компонент активирован, посещений:', this.visits);
  },
  deactivated() {
    console.log('Компонент помещен в кеш');
  }
};

Эти хуки позволяют обновлять данные, подгружать контент или останавливать процессы, когда компонент деактивирован.

Динамическое кеширование маршрутов

Иногда требуется кешировать только определенные маршруты. Для этого можно использовать динамическое управление компонентами через computed-свойства и <router-view> с v-if:

<template>
  <keep-alive :include="cachedRoutes">
    <router-view v-if="shouldRender" />
  </keep-alive>
</template>

<script>
export default {
  computed: {
    cachedRoutes() {
      return ['Home', 'Dashboard'];
    },
    shouldRender() {
      return this.$route.name !== 'Login';
    }
  }
};
</script>

Такой подход позволяет гибко контролировать кеширование в зависимости от маршрута, пользовательских прав или состояния приложения.

Ограничение числа кешируемых компонентов

Для больших приложений важно избегать чрезмерного потребления памяти. Атрибут max ограничивает количество компонентов в кеше:

<keep-alive :max="3">
  <router-view />
</keep-alive>

Если число компонентов превышает max, наименее недавно использованные компоненты будут удалены из кеша.
Совместно с include и exclude можно создавать сложные правила кеширования для разных маршрутов.

Практическое использование в крупных приложениях

Формы и вкладки Кеширование позволяет сохранять состояние форм при навигации между вкладками.
Списки с пагинацией Долгие списки с динамической подгрузкой данных остаются без перезагрузки при возврате на предыдущий маршрут.
Управление медиа и таймерами Видео, аудио или анимации не прерываются при смене маршрута, если компонент остается в кеше.