Глубокое понимание и использование keep-alive в Vue

Vue.js

чтоkeep-alive?

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

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

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

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

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

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

keep-aliveявляется абстрактным компонентом, кэшированные компоненты не будутmounted, для этого обеспечитьactivatedиdeactivatedфункция ловушки

После версии 2.1.0keep-aliveНовые добавленные два свойства:include(вступает в силу включенный кеш компонентов) сexclude(Исключенные компоненты не кэшируются и имеют приоритет вышеinclude).

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

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

  • includeВключенные компоненты (могут быть строками, массивами и регулярными выражениями, кэшируются только соответствующие компоненты)

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

  • maxМаксимальное значение компонента кеша (тип символьный или числовой, количество компонентов кеша можно контролировать)

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

Пример кода:

// 只缓存组件name为a或者b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

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

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

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

Сотрудничатьrouterиспользовать

router-viewтакже является компонентом, если непосредственно обернут вkeepaliveвнутри, то все компоненты представления, соответствующие пути, будут кэшированы следующим образом:

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

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

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

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

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

2. ИспользуйтеmetaАтрибуты

// routes 配置
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/profile',
    name: 'profile',
    component: Profile,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里是不会被缓存的视图组件，比如 Profile！ -->
</router-view>

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

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.

^_<

Категории