keep-alive с динамическими компонентами

Демки здесь.

Ранее мы использовали атрибут is для переключения компонентов в интерфейсе вкладок:

<component v-bind:is="currentTabComponent"></component>

Но иногда, при переключении между компонентами, вы хотите сохранить их состояния или избежать повторной отрисовки по соображениям производительности. Например, когда немного доработаем наш интерфейс с вкладками:

Вы можете заметить, что если выбрать запись, переключиться на вкладку Archive, затем переключиться обратно на Posts, то больше не будет показываться выбранная запись. Это связано с тем, что каждый раз, когда вы переключаетесь на новую вкладку, Vue создаёт новый экземпляр currentTabComponent.

Пересоздание динамических компонентов обычно является полезным поведением, но в нашем случае, мы хотим чтобы экземпляры компонентов вкладок кэшировались после их создания в первый раз. Для решения этой проблемы мы можем обернуть наш динамический компонент в элемент <keep-alive>:

<!-- Неактивные компоненты будут закэшированы! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

Посмотрите на результат ниже:PostsArchive

Теперь вкладка Posts управляет собственным состоянием (выбранной записью) даже когда не отображается. Посмотрите этот fiddle для полного примера кода.

Обратите внимание, что <keep-alive> требует, чтобы у всех переключаемых компонентов было задано имя, либо через опцию name компонента, либо через локальную/глобальную регистрацию.