Разговор о кешировании компонентов в Vue

Vue.js

до«Сводка динамических компонентов и глобальной привязки событий, вызванных случаем Vue»Кэширование компонентов кратко упоминается в этой статье. На тот момент он просто дал идею решения проблемы, а о кэшировании компонентов много не говорил, сегодня мы подробно поговорим о кэшировании компонентов.

В режиме разработки компонентов мы разделим весь проект на множество компонентов, а затем организуем их разумным образом.

Естественно, есть проблема переключения между компонентами, в Vue есть понятие «динамические компоненты», что позволяет лучше реализовать переключение компонентов.

В реальной разработке проекта невозможно, чтобы продукт нас отпустил.Спрос всегда меняется.Если вы сталкиваетесь с теми продуктами, которые не меняют спрос, вам следует жениться.Это слишком редко.

В последних проектах необходимо реализовать функцию, сохраняющую последнюю вкладку. Как показано на рисунке ниже, когда я выбираю компонент B, я надеюсь, что при переключении с домашней страницы на страницу настроек он останется в компоненте B вместо повторного рендеринга в компонент A по умолчанию.

Сначала мы можем использовать встроенные компоненты<component>Реализуйте эффект динамических компонентов.

<template>
  <div>
      <button
        v-for="tab in tabs"
        :key="tab"
        @click="currentTab = tab"
      ></button>
    <component :is="currentTab"></component>
  </div>
</template>
<script>
export default {
  name: "Tab",
  data() {
    return {
      currentTab: "A",
      tabs: ['A','B']
    };
  }
};
</script>

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

Чтобы исправить это, вам также необходимо использовать встроенные компоненты vue.<keep-alive>.

keep-alive

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

Стоит отметить, что слова «динамические компоненты» будут иметь значение только при включении динамических компонентов. Это не будет работать, если это не динамический компонент. Например, следующее использование неэффективно.

<keep-alive>
    <my-component></my-component>
</keep-alive>

В таком случае давайте посмотримkeep-aliveНесколько часто используемых методов:

Вариант 1. Используйте встроенные компоненты<component>.

<keep-alive>
  <component :is="view"></component>
</keep-alive>

Вариант 2: Подкомпоненты, когда имеет место условное суждение

<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

Вариант 3: При использовании в сочетании с маршрутизацией

 <keep-alive>
     <router-view></router-view>
 </keep-alive>

Вышеуказанные три способа кэширования компонентов. Еще один момент, который следует отметить, заключается в том, что<keep-alive>Может использоваться только при наличии только одного дочернего компонента. Если у вас есть v-for в нем, это не будет иметь никакого эффекта.

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

<keep-alive>
    <router-view></router-view>
</keep-alive>

Но здесь вы обнаружите, что мы кэшировали каждый компонент, не только «страница настроек» в случае, но и «домашняя страница» кэшируется, а это не то, что нам нужно.

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

Причина в том, что<keep-alive>Предоставляются два свойстваincludeа такжеexclude.

  • include: кэшируются только компоненты с совпадающими именами.
  • exclude: Любой компонент, имя которого совпадает, не будет кэшироваться.

Оба могут быть представлены в виде строк, разделенных запятыми, регулярных выражений или массива.

<keep-alive include="a,b"></keep-alive>
<keep-alive :include="/a|b/"></keep-alive>
<keep-alive :include="['a', 'b']"></keep-alive>

Итак, совместите<keep-alive>изincludeилиexcludeсвойства, мы можем легко выбрать компоненты, которые необходимо кэшировать.

<keep-alive include="system">
    <router-view></router-view>
</keep-alive>

Таким образом, мы можем кэшировать только «страницу настроек», а затем добиться сохранения последней выбранной вкладки.

Добро пожаловать на общедоступный номер: Liuxiao Dengdeng, свяжитесь со мной.

Категории