vueキャッシュのkeep-aliveの理解と応用の詳細

4744 ワード
vue keep-alive
公式解釈：
＜keep-alive＞ダイナミックコンポーネントを包むと、廃棄するのではなく、活動しないコンポーネントの例がキャッシュされます。「transion」と同じように、「keep-alive」は抽象的なコンポーネントです。それ自体はDOM要素をレンダリングしないし、コンポーネントの親コンポーネントチェーンにも現れないです。
コンポーネントがkeep-alive内で切り替わると、そのactivatedとdeactivatedの二つのライフサイクルフック関数が対応して実行されます。
コンポーネントの状態を保持したり、再レンダリングを避けるために主に使用されます。
keep-aliveはVueの内蔵部品であり、コンポーネント切り替え中に状態をメモリに残し、再度アクセスする時も、元の状態を元に戻すのではなく、元の状態を維持しています。いわゆるコンポーネントキャッシュです。
私たちは、ルートvue-routerを使ってコンポーネントを切り替える時は、状態を保存しないで、router.push（）またはrouter.push（）またはrouter.replace（）を行う時は、古いコンポーネントは破棄されて、新しいコンポーネントが新しく作られて、完全なライフサイクルを走ります。だからキャッシュはよくrouter-viewと一緒に現れます。

<keep-alive>
  <router-view /> <!--                   -->
</keep-alive>
keep-aliveで作成されたコンポーネントに含まれています。二つのライフサイクルのフック：activatedとdeactivated：
1.activated：keep-aliveコンポーネントの起動時に呼び出す
2.deactivated：keep-aliveコンポーネントの停止時に呼び出します。
注意：コンポーネントがkeep-aliveに包まれている場合のみ、この二つのライフサイクル関数が呼び出されます。この二つのフックはサーバー側でレンダリング中に呼び出されません。
アプリケーションシーン:
公式サイトには複数のタブインターフェースの例がありますが、詳しく紹介しています。
私たちは実際に開発したプロジェクトの中で、例えば詳細ページにジャンプする時、リストページのスクロールバーの位置を保持して、戻る時もこの位置にいます。このようにして、ユーザー体験を高めることができます。この時にキャッシュコンポーネントkeep-aliveを使って解決できます。
keep-aliveキャッシュのセットを設置して、二つのライフサイクルフックが追加されます。
  • 初めてコンポーネントに入る時：before Route Enter＞beforeCreate＞created＞mounted＞activated...>before Route Leave>deactivated
  • 再度コンポーネントに入る時：before Route Enter>activated...>before Route Leave>deactivated
    • キャッシュされたコンポーネントのactivatedフック関数は毎回トリガされるので、このフックによって、現在のコンポーネントはキャッシュされたデータを使用するか、それともインターフェースローディングデータを再起動するかを判断することができます。keep-aliveコンポーネントを使用していないと、ページが戻るとページが再描画され、初めてコンポーネントに入る一連のライフサイクルも一々トリガされます。
    コンポーネントを離れる時、keep-aliveを使って、before Destroyとdestroyedフックを呼び出さないで、コンポーネントが破壊されていないため、キャッシュされました。このフックはbeforeDestroyとdestroyedの代わりとして考えられます。キャッシュ・コンポーネントが破壊される時にするいくつかの操作はこの中に入れられます。
    需要の実例
    最近のプロジェクトではキャッシュが必要なシーンに遭遇しました。主にリストページから詳細ページへのジャンプですが、リストページにはマルチレベルの関係があります。具体的な需要は以下の通りです。

    このページに初めて入ると、デフォルトでは左側のツリー構造メニューを表示し、メニューをクリックして、右側に該当するデータリストをロードし、リストから詳細ページに進み、このページに戻ります。このページはユーザが以前に選択したツリーメニューとデータリストを残してほしいです。他のページからこのページに入るとキャッシュは必要ありません。
    実例と実践
    考え方：routerにmeta情報を設定し、リストページをキャッシュする。
    1.ルート設定のmeta情報
    
const List = () => import(/* webpackChunkName: "list" */ '../pages/List.vue')
const Detail = () => import(/* webpackChunkName: "detail" */ '../pages/Detail.vue')
{
  path: 'list',
  name: 'list',
  component: List,
  meta: {
    title: '  ',
    keepAlive: true, //    
    isKeep: false
  }
},
{
  path: 'dist',
  name: 'detail',
  component: Detail
}
    2.レンダリングマッチングビューコンポーネントrouter-viewを修正する（一般的にはap.vueファイルであり、実際の需要によって異なります）
    
<div class="container">
  <keep-alive> 
    <!--           -->
    <router-view v-if="$route.meta.keepAlive"></router-view> 
   </keep-alive>
   <!--            -->
   <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
    keep-aliveコンポーネントのinclude/exclude属性を使用しても良いし、includeはキャッシュするコンポーネント名（定義時のname属性）を表し、excludeは反対に、マッチングしたコンポーネントはキャッシュされない。
    
<div class="container">
  <keep-alive include="list">
    <router-view></router-view> 
   </keep-alive>
</div>
    3.キャッシュが必要なページでは、ナビゲーションによってベフォート・ルーターとactivatedフックをガードし、キャッシュを使うか再レンダリングするかを判断します。
    
beforeRouteEnter (to, from, next) {
  //           
  if (from.name === 'detail') {
    to.meta.isKeep = true
  } else {
    to.meta.isKeep = false
  }
  next()
},
activated () {
  if(this.$route.meta.isKeep) {
    //     ，     
  } else {
    //     ，         
  }
}
    ここでbefore Route Enterフックは、watch属性を使ってルートの変化をモニターすることもできます。
    
watch: {
  $route(to, from) {
    //  to/from.path                  
  }
}
    問題:
    詳細からリストに戻ると正常ですが、詳細ページをF 5で更新した後、リストに戻っても前の状態を残しておくことはできません。
    解決策：
    現在を離れる前に、Local Strageに情報を格納し、詳細データの更新後に手動でローディング要求をトリガする。
    ここでvueキャッシュのkeep-aliveについての理解と応用についての詳細な文章を紹介します。vue keep-aliveに関する内容は以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。
    sql重複データの削除の詳細方法
    SQL Serverで重複データを削除するいくつかの方法