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

Question

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

YeaHub · Accepted Answer

keep-alive — это встроенный компонент Vue, который кэширует динамические компоненты и сохраняет их состояние.Как работает keep-aliveПри оборачивании компонента в keep-alive:Компонент не уничтожается при смене маршрутаDOM может быть временно удалёнСостояние компонента сохраняется в памятиСпециальные хуки keep-aliveДля работы с кэшируемыми компонентами Vue предоставляет дополнительные хуки.activatedВызывается при активации компонентаАналог повторного отображенияПодходит для обновления данныхdeactivatedВызывается при деактивации компонентаКомпонент скрывается, но не уничтожаетсяИспользуется для приостановки логикиПример:export default {
  activated() {
    // обновление данных при возврате
  },
  deactivated() {
    // пауза таймеров или подписок
  }
};
Отличие от обычного жизненного циклаbeforeUnmount и unmounted не вызываютсяКомпонент остаётся в памятиСостояние не сбрасываетсяВыводПри использовании keep-alive жизненный цикл дополняется хуками activated и deactivated, которые позволяют управлять логикой кэшируемых компонентов без их уничтожения.