Глубокое понимание Vue keep-alive и практическое резюме

что`keep-alive`

При нормальной разработке некоторые компоненты не нужно инициализировать несколько раз, в настоящее время нам нужно сохранять компоненты.Сохраняйте состояние компонента неизменным, компонент не будет повторно инициализирован при следующем отображении.

То есть,keepaliveдаVueВстроенный компонент, который можетСохраняйте состояние содержащихся компонентов или избегайте повторного рендеринга. Также известен каккеш компонентов

<keep-alive>Это встроенный компонент Vue, который может сохранять состояние в памяти во время процесса переключения компонентов, предотвращая повторный рендеринг DOM.

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

prop:

include: Строка или регулярное выражение. Кешируются только соответствующие компоненты.
исключить: Строка или регулярное выражение. Любые совпадающие компоненты не будут кэшироваться.

`keep-alive`Цикл объявления выполняется

При первом входе на страницу последовательность срабатывания хука

created-> mounted-> activated,
Срабатывает при выходеdeactivated При повторном входе (вперед или назад) срабатывает толькоactivated

Метод монтирования событий и т.д. выполняется только один раз и помещается вmountedin; метод, который компонент выполняет при каждом входе, помещается вactivatedсередина;

Основное использование

<!--被keepalive包含的组件会被缓存-->
<keep-alive>
    <component><component />
</keep-alive>

одеялоkeepaliveВключенные компоненты не будут повторно инициализированы, что означаетНе будет повторно проходить функции жизненного цикла
Но иногда мы хотим, чтобы наши кешированные компоненты могли снова отображаться, тогдаVueрешил проблему для нас входит вkeep-aliveУ компонентов, созданных в , будет еще два хука жизненного цикла:activatedа такжеdeactivated:

activatedкогдаkeepaliveЗапускается, когда содержащийся компонент снова визуализируется
deactivatedкогдаkeepaliveЗапускается, когда содержащийся компонент уничтожается

keepaliveявляется абстрактным компонентом, кэшированные компоненты не будут mounted,предусмотреть этоactivatedа такжеdeactivatedфункция ловушки

Понимание параметров

keepaliveВы можете получить 3 атрибута в качестве параметров для соответствия соответствующему компоненту для кэширования:

includeВключенные компоненты (могут быть строками, массивами и регулярными выражениями, кэшируются только соответствующие компоненты)
excludeИсключенные компоненты (для строк, массивов и регулярных выражений любые соответствующие компоненты не будут кэшироваться)
maxМаксимальное значение компонента кэша (тип - это символ или номер, вы можете управлять количеством компонентов кэша)

Примечание. При использовании регулярных выражений или массивов обязательно используйтеv-bind

<!-- 将（只）缓存组件name为a或者b的组件, 结合动态组件使用 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染) -->
<keep-alive exclude="c"> 
  <component></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

<!-- 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件 -->
<keep-alive include="a,b" exclude="b"> 
  <component></component>
</keep-alive>

<!-- 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件 -->
<keep-alive exclude="c" max="5"> 
  <component></component>
</keep-alive>

встретить`vue-router`комбинировать`router`Использовать, кэшировать часть страницы

Компоненты просмотра по всем путям будут кэшироваться

<keep-alive>
    <router-view>
        <!-- 所有路径匹配到的视图组件都会被缓存！ -->
    </router-view>
</keep-alive>

если только хочешь`router-view`Компонент внутри кэшируется, что мне делать?

использоватьinclude/exclude
использоватьmetaАтрибуты

1. Используйтеinclude (excludeпример похож)

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

<keep-alive include="a">
    <router-view>
        <!-- 只有路径匹配到的 include 为 a 组件会被缓存 -->
    </router-view>
</keep-alive>

2. Используйте мета-атрибут

Преимущество: нет необходимости перечислять имя компонента, который необходимо кэшировать.

Используйте свойство keepAlive $route.meta:

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

нуждаться вrouterУстановите метаданные маршрутизатора в:

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

[Добавить соль] Используйте router.meta для расширения

Предположим, что здесь есть 3 маршрута: A, B, C.

нужно:
- Отображает A по умолчанию
- B переходит к A, A не обновляется
- C переходит к A, A обновляет
Метод реализации
- Установите метаатрибут в маршруте A:

{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // 需要被缓存
        }
}

Установите beforeRouteLeave в компоненте B:

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta
            to.meta.keepAlive = true;  // 让 A 缓存，即不刷新
            next();
        }
};

Установите beforeRouteLeave в компоненте C:

export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // 让 A 不缓存，即刷新
            next();
        }
};

B может достичь такого возврата A, A не обновляется, C и обратно к A обновляется.

Руководство по борьбе с ямами

1.keep-aliveСначала сопоставьте включенные компонентыnameполе, еслиnameнедоступен, соответствует текущему компонентуcomponentsЗарегистрированное имя в конфигурации. 2.keep-aliveне будет работать должным образом в функциональных компонентах, поскольку они не имеют кэшированных экземпляров.
3. Когда условия согласования одновременноincludeа такжеexcludeсуществует, сexcludeСамый высокий приоритет (текущая версия vue 2.4.2). Например: включите, исключите и сопоставьте компонент A одновременно, тогда компонент A не будет кэшироваться.
4. Входит вkeep-alive, но встречаетсяexclude, не позвонитactivatedа такжеdeactivated.

Реализовать обновление вперед, назад не обновлять

благодарныйiceuncleобщий«Vue реализует обновление вперед, назад не обновляет».

Суммировать

Метод маршрутизации хорош, вам не нужно заботиться о том, через какую страницу перепрыгнуть, пока router.go(-1) может вернуться, никаких дополнительных параметров не требуется.

В неодностраничных приложенияхkeep-aliveЕго нельзя эффективно кэшировать. ==

функции хука жизненного цикла поддержки активности: активированы, деактивированы

использовать<keep-alive>Сохранит данные в памяти, если вы хотите получать самые свежие данные каждый раз при входе на страницу, вам нужноactivatedэтап для получения данных, провести первоначальныйcreatedЗадача получения данных в хук.

приложение

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

beforeCreate(){}Во время выполнения ни данные, ни методы не инициализируются
created(){}данные и методы инициализируются, если вы хотите вызватьmethodsметод или операцияdataДанные внутри могут быть найдены только в самое раннее время.createdВнутри операции.
beforeMount(){}Указывает, что шаблон был отредактирован в памяти, но еще не отображен на странице шаблона. То есть элементы на странице на самом деле не заменяются, просто некоторые строки шаблона, написанные ранее.
mounted(){}Указывает, что шаблон в памяти фактически смонтирован на странице, и пользователь может видеть визуализированный интерфейс.

Обратите внимание, что это последняя функция функции жизненного цикла.После выполнения этой функции это означает, что весь экземпляр vue был инициализирован, и компонент вышел из фазы создания и перешел в фазу выполнения.
Вот хуки для двух функций жизненного цикла во время выполнения:

beforeUpdate(){}Это означает, что наш интерфейс не обновлялся, но данные в data самые свежие. То есть страница не была синхронизирована с данными в последних данных.
updated(){}Указывает, что данные на странице и данные были синхронизированы и обновлены.
beforeDestory(){}Когда этот хук жизненного цикла выполняется, экземпляр Vue переходит из фазы выполнения в фазу уничтожения.В это время данные и методы экземпляра доступны.
destoryed(){}Указывает, что компонент был полностью уничтожен, и все методы экземпляра в компоненте недоступны.

Ссылаться на:

issues#811
vue#keep-alive
vue2.0: лучшая практика поддержки активности

чтоkeep-alive

keep-aliveЦикл объявления выполняется