Какие хуки жизненного цикла вызываются при использовании keep-alive?

keep-alive — это встроенный компонент Vue, который кэширует динамические компоненты и сохраняет их состояние.

Как работает keep-alive

При оборачивании компонента в keep-alive:

• Компонент не уничтожается при смене маршрута

• DOM может быть временно удалён

• Состояние компонента сохраняется в памяти

Специальные хуки keep-alive

Для работы с кэшируемыми компонентами Vue предоставляет дополнительные хуки.

1. activated

   • Вызывается при активации компонента

   • Аналог повторного отображения

   • Подходит для обновления данных

2. deactivated

   • Вызывается при деактивации компонента

   • Компонент скрывается, но не уничтожается

   • Используется для приостановки логики

Пример:

export default {
  activated() {
    // обновление данных при возврате
  },
  deactivated() {
    // пауза таймеров или подписок
  }
};

Отличие от обычного жизненного цикла

• beforeUnmount и unmounted не вызываются

• Компонент остаётся в памяти

• Состояние не сбрасывается

Вывод

При использовании keep-alive жизненный цикл дополняется хуками activated и deactivated, которые позволяют управлять логикой кэшируемых компонентов без их уничтожения.