keep-aliveキャッシュ最適化の実践概要

keep-aliveキャッシュ最適化の実践概要
keep-alive

 Vue     ，                  ，      DOM。
        ，           ，       。     ，        ：          DOM   ，           。

シーンの適用
検索リストページ==>詳細ページ=>リストページに戻り、最後にロードされたデータを保存し、最後のブラウズ場所を自動的に復元します.
keep-aliveフック関数
まず、キャッシュに関連するvueフック関数を簡単に説明します. keepAliveキャッシュが設定されているコンポーネントについて:したがって、重複要求を回避するために、activatedというフックで、現在のコンポーネントがキャッシュされたデータを使用する必要があるのか、取得したデータを再リフレッシュする必要があるのかを判断します.
prop:
include:文字列または正規表現.一致するコンポーネントのみがキャッシュされます.Exclude:文字列または正規表現.一致するコンポーネントはキャッシュされません.
一般的な使い方:

//   
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

router実装手順と組み合わせる

前回ロードしたデータ

を保存する.
routerでrouterのメタ情報metaを設定する必要があります(scrollTopプロパティの設定はブラウズ位置を保存するため、後で):

    export const constantRouterMap = 
    [{
        path: 'index',
        name: 'list',
        hidden: true,
        meta: { title: '    ', keepAlive: true, scrollTop: 0 },
        component: () => import('@/views/List')
      },
      {
        path: 'clientInfo',
        name: 'clientInfo',
        hidden: true,
        component: () => import('@/views/clientInfo/index'),
        meta: { title: '    ', icon: 'icon-yejiguanli', keepAlive: true }
    }]
    export default new Router({
      mode: 'history',
      routes: constantRouterMap,
      scrollBehavior: () => ({ y: 0 })
    })

ページ内のルーティングコンテナにkeep-aliveラベルを設定する

export default {
  name: 'List'
}

ページのスクロール位置を保持して初めてページに入ると、scrollTop=0になります.前述したように、keep-aliveを設定するページでは、必ずactivatedメソッドを実行します.ページにスクロールバーが存在し、ジャンプをルーティングする2つのシーンがあります.

リストページを離れる詳細ページに入る(本ページのルートメタ情報scrollTopを現在のスクロール位置に変更する)

.

リストページを離れて他の平準ページに進む(本ページのルーティングメタ情報scrollTopを0に変更する)

.

const myMixin = {
  activated() {
    document.querySelector('#app').scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    if (to.name.includes('clientInfo')) {
      const scrollTop = document.querySelector('#app').scrollTop
      from.meta.scrollTop = scrollTop
    } else {
      from.meta.scrollTop = 0
    }
    next()
  }
}

ページにリストが多い場合は、activatedメソッドとbeforeRouteLeaveメソッドを抽出して多重化し、ページに引用すればよい.

import myMixin from '@/utils/mixin.js'
export default {
  name: 'List',
  mixins: [myMixin]
}

とりあえずこれだけまとめて、皆さんにお役に立てばと思います!