keep-alive

1.keep-aliveは、Vueが提供する抽象的なコンポーネントであり、コンポーネントをキャッシュし、パフォーマンスを節約します.
2.keep-aliveでコンポーネントを切り替えると、コンポーネントのactivated、deactivatedの2つのライフサイクルフック関数が実行されます.
3.この点についても、Vueのスクロール動作を利用することができますが、HTML 5 historyモードであることを前提に、コンポーネントに入るたびにページの初期位置を上部に保つことを要求する製品もあります.
4.routerインスタンスを作成するときに、ユーザがルーティングを切り替えたときにscrollBehaviorメソッド受信to,formルーティングオブジェクトをトリガするscrollBehavior(スクロール動作)メソッドを提供することができる.

の3番目のパラメータsavedPositionは、ブラウザの前進後退ボタンがトリガーする場合にのみ使用可能である.

この方法は、falseまたは空のオブジェクトを返すと、スクロール

は発生しないスクロール位置のオブジェクト情報を返す.

この方法では、ページのスクロール位置を指定するために戻り値を設定することができます.例えば、return {x:0,y:0}

.

は、ユーザがルーティングを切り替えるときに、すべてのページを上位位置

に戻すことを示す.

savedPositionに戻ると、戻るボタンをクリックすると元のブラウザのように表現され、戻るページは前のボタンをクリックしてジャンプする位置にスクロールし、大体次のように書かれています:

const router=new VueRouter({
        routes:[
            {
                path:"/",
                component:Home
            }
        ],
        scrollBehavior(to,form,savedPosition){
         	if(savedPosition){
            	return savedPosition
         	}else{
           		return {x:0,y:0}
         	}
         	//              :
         	if(to.hash){
           		return {
             		selector:to.hash
           		}
         	}
     	}
})

もう1つの方法は、keep-aliveアクティブ化でactivedフック関数がトリガーされる場合、この関数内にscrollTopを0に設定することです.
5.keep-aliveに包まれたダイナミックコンポーネントまたはrouter-viewはアクティブでないインスタンスをキャッシュし、再び呼び出されたこれらのキャッシュされたインスタンスは再多重化され、リアルタイム更新を必要としないページによってはパフォーマンス上の消費が大幅に減少し、HTTPリクエストを再送信する必要がなくなります.しかし、keep-aliveに包まれたコンポーネントが取得を要求したデータがページを再レンダリングしないという問題もあります.これは、たとえばダイナミックルーティングを適用してマッチングすると、ページは最初の要求データのレンダリング結果しか保持されないので、特定の状況でinclude、excludeプロパティを使用して特定のコンポーネントを強制的にリフレッシュする必要があります.

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include属性はname属性のみがbookListsであり、bookListsのコンポーネントがキャッシュされることを示し、他のコンポーネントはキャッシュされないexclude属性はname属性がindexListsのコンポーネント以外はキャッシュされず、他のコンポーネントはキャッシュされる
(2)meta属性の利用

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //        
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //         
 } 
]

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

(3)公式に提案されたソリューションはルーティングパラメータの変化に応答する(4)berforeRouteEnterを用いて前進リフレッシュを実現し,後退キャッシュ資料(5)サードパーティプラグインを用いて前進リフレッシュを実現し,後退キャッシュを実現する(これを推奨しない初心者にとって面接の時は馬鹿目で,仕事の時は勝手にする)
以上の参考:https://www.jianshu.com/p/4b55d312d297
keep-aliveを使用すると、mountedライフサイクル関数は毎回トリガーされません(コンポーネントをリフレッシュするときにのみ機能します).vueにはactivatedとdeactivated関数が追加されているので、activated関数でいくつかの操作を実行することができます.このとき、activatedはkeep-aliveを使用していないときのmountedライフサイクル関数と差が少なくなります.deactivated関数では、コンポーネントを離れるときの操作とkeep-aliveを使用していないときのdesrtoyedライフサイクル関数の差が少ない役割を果たすことができます.テキストリンクhttps://blog.csdn.net/weixin_41615439/article/details/86605107
もっと詳しくお話ししますhttps://www.jianshu.com/p/9523bb439950