Как работает механизм кеширования дочерних компонентов с помощью KeepAlive?

KeepAlive — встроенный компонент во Vue.js, который позволяет условно кэшировать экземпляры компонентов при динамическом переключении между несколькими компонентами. ru.vuejs.org

По умолчанию KeepAlive кэширует любой экземпляр компонента внутри себя. ru.vuejs.org Настроить это поведение можно с помощью параметров include и exclude: ru.vuejs.org d-ukolov.gitbook.io

• include — строка, регулярное выражение или массив. d-ukolov.gitbook.io Только компоненты с совпадающими именами будут кэшироваться. d-ukolov.gitbook.io
• exclude — строка, регулярное выражение или массив. d-ukolov.gitbook.io Все компоненты с совпадающими именами не будут кэшироваться. d-ukolov.gitbook.io

Ещё один параметр — max — устанавливает максимальное количество экземпляров для кэширования. ru.vuejs.org d-ukolov.gitbook.io Когда этот лимит достигнут, экземпляр закэшированного компонента, который дольше всего не использовался, уничтожается перед созданием нового экземпляра. d-ukolov.gitbook.io

Когда экземпляр компонента удаляется из DOM, но является частью дерева компонентов, кэшированного KeepAlive, он переходит в состояние деактивированного, вместо того, чтобы быть размонтированным. ru.vuejs.org Когда экземпляр компонента вставляется в DOM как часть кэшированного дерева, он активируется. ru.vuejs.org

В основном KeepAlive используется для сохранения состояния компонента, чтобы избежать повторной отрисовки. d-ukolov.gitbook.io