Использование keep-alive в Vue для реализации кэширования страниц

что`keep-alive`

Иногда мы не хотим, чтобы компоненты повторно отображались, чтобы повлиять на взаимодействие с пользователем, или из соображений производительности избегание многократного повторного отображения снижает производительность. Вместо этого я надеюсь, что компонент можно кэшировать для сохранения текущего состояния. Затем вам нужно использоватьkeep-aliveкомпоненты. Официальное определение веб-сайта:

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。

主要用于保留组件状态或避免重新渲染。

Сценарии применения

если не используетсяkeep-aliveкомпонент, страница все еще будет повторно отображаться при откате страницы, вызываяcreatedКрюк, опыт не хороший. Используйте в следующих сценарияхkeep-aliveКомпоненты значительно улучшают пользовательский опыт:

Щелкните продукт на странице списка продуктов, чтобы перейти к сведениям о продукте, и исходная информация по-прежнему будет отображаться после возврата.
Список заказов переходит к деталям заказа, возвратам и так далее.

`keep-alive`жизненный цикл

При входе в первый раз:
1. created > mounted > activated
2. Запускается после выходаdeactivated
Введите снова:
1. вызовет толькоactivated
Метод монтирования событий и т.д. выполняется только один раз и помещается вmountedin; метод, который компонент выполняет при каждом входе, помещается вactivatedсередина

использовать в проекте

1. Изменить App.vue

<div id="app" class='wrapper'>
  <keep-alive>
  <!-- 需要缓存的视图组件 -->
    <router-view v-if="$route.meta.keepAlive">
    </router-view>
  </keep-alive>

  <!-- 不需要缓存的视图组件 -->
  <router-view v-if="!$route.meta.keepAlive">
  </router-view>
</div>

2. Установите keepAlive в маршрутизации

{
  path: 'list',
  name: 'itemList', // 商品管理
  component (resolve) {
    require(['@/pages/item/list'], resolve)
  },
  meta: {
    keepAlive: true,
    title: '商品管理'
  }
}

3. ИзменитьbeforeEachкрюк

Этот шаг заключается в очистке кеша от бесполезных страниц. Теперь предположим, что обе страницы A и B кэшированы:

Если вы выйдете из системы после входа на страницу А в первый раз, страница не будет обновляться при повторном входе на страницу. Это несовместимо с текущей бизнес-логикой. В результате мы хотим, чтобы страница А переходила вперед, а затем возвращалась, и страница оставалась прежней, а не выходила и снова заходила в одно и то же.
После входа на страницу A я перешел на страницу B. После тестирования я обнаружил, что страница B на самом деле отображает кеш страницы A, даже если URL-адрес изменился ~

Чтобы решить эту проблему, необходимо определить, идет ли страница вперед или назад. существуетbeforeEachХук добавить код:

let toDepth = to.path.split('/').length
let fromDepth = from.path.split('/').length
if (toDepth < fromDepth) {
  // console.log('后退。。。')
  from.meta.keepAlive = false
  to.meta.keepAlive = true
}

Запись положения прокрутки страницы

keep-aliveПозиция прокрутки страницы не записывается, поэтому нам нужно записать текущую позицию прокрутки при переходе.activatedПеремещайтесь в исходное положение при подсечке. Конкретные дизайнерские идеи:

существуетdeactivatedТекущая позиция прокрутки записывается в хук, здесь я используюlocalStorage:

 deactivated () {
   window.localStorage.setItem(this.key, JSON.stringify({
    listScrollTop: this.scrollTop
  }))
 }

существуетactivatedПрокрутите крючок:

this.cacheData = window.localStorage.getItem(this.key) ? JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)

Ссылка на ссылку:

Vue реализует прямое обновление, обратное не обновляется
Используйте keep-alive для динамических компонентов

чтоkeep-alive