KeepAlive
Встроенный компонент, который позволяет нам условно кэшировать экземпляры компонентов при динамическом переключении между несколькими компонентами
Основное использование
В главе «Основы компонентов» мы представили синтаксис динамических компонентов , используя component специальный элемент
По умолчанию экземпляр активного компонента будет размонтирован при отключении от него. Это приведет к потере любого измененного состояния. Когда этот компонент отобразится снова, будет создан новый экземпляр только с исходным состоянием.
Создание нового экземпляра компонента при переключении обычно является полезным действием, но в данном случае нам бы очень хотелось, чтобы два экземпляра компонента сохранялись, даже если они неактивны. Чтобы решить эту проблему, мы можем обернуть наш динамический компонент встроенным KeepAlive компонентом
Теперь состояние будет сохраняться между переключателями компонентов
Включить/исключить
По умолчанию KeepAlive кэширует любой экземпляр компонента внутри. Мы можем настроить это поведение с помощью реквизитов include и exclude. Оба реквизита могут быть строкой, разделенной запятыми RegExp, или массивом, содержащим любой из типов
Соответствие проверяется по параметру компонента name, поэтому компоненты, которые необходимо условно кэшировать, KeepAlive должны явно объявить name параметр
Важно
Начиная с версии 3.2.34, использование однофайлового компонента script setup автоматически определяет свой name вариант на основе имени файла, устраняя необходимость объявлять имя вручную.
Максимальное количество кэшированных экземпляров
Мы можем ограничить максимальное количество экземпляров компонентов, которые можно кэшировать с помощью max свойства. Если max указано, KeepAliveведет себя как кэш LRU: если количество кэшированных экземпляров превышает указанное максимальное количество, кэшированный экземпляр, к которому последний раз обращались, будет уничтожен, чтобы освободить место для нового.
Жизненный цикл кэшированного экземпляра
Когда экземпляр компонента удаляется из DOM, но является частью дерева компонентов, кэшированного KeepAlive, он переходит в деактивированное состояние, а не размонтируется. Когда экземпляр компонента вставляется в DOM как часть кэшированного дерева, он активируется.
Поддерживаемый компонент может регистрировать перехватчики жизненного цикла для этих двух состояний, используя onActivated() и onDeactivated()
Обратите внимание, что
- onActivated также вызывается при монтировании и при размонтировании onDeactivated
- Оба перехватчика работают не только с корневым компонентом, кэшированным пользователем KeepAlive, но и с компонентами-потомками в кэшированном дереве.
Резюме
KeepAlive кэширует динамически переключаемые компоненты, заключенные внутри
тип
При обертывании динамического компонента KeepAlive кэширует экземпляры неактивного компонента, не уничтожая их.
В любой момент времени может быть только один экземпляр активного компонента в качестве прямого дочернего элемента KeepAlive
Когда компонент переключается внутри KeepAlive, его перехватчики жизненного цикла activated и deactivated жизненный цикл будут вызываться соответствующим образом, предоставляя альтернативу mountedи unmounted, которые не вызываются. Это относится как к прямому потомку, KeepAlive так и ко всем его потомкам
Основное использование
При использовании с v-if / v-else-ветвями одновременно должен отображаться только один компонент
Используется вместе с Transition
С использованием include / exclude
Использование с max