Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態（スクロール位置情報など）をキャッシュする必要があることが多々あります。このとき、状態を保存してキャッシュする必要がありますが、Vue では状態をキャッシュするためのキープアライブコンポーネントを提供しています。
この問題にはいくつかの解決策があります。

1. メタタグを使用する

1. まず、ルートのメタタグのkeepAlive属性をtrueとして記録します。

パス: '/classify',
  名前: '分類'、
  コンポーネント: () => import('@/views/classify/classify.vue'),
  メタ: {
    タイトル: 「Leishitaoクーポン」
    キープアライブ: 真
  }
},

2. ルーターインスタンスを作成するときにscrollBehaviorメソッドを追加する

デフォルトの新しいルーターをエクスポートします({
  モード: '履歴'、
  ベース: process.env.BASE_URL、
  ルート、
  scrollBehavior (to、from、savedPosition) {
    if (保存された位置) {
      保存された位置を返す
    } それ以外 {
      戻る {
        x: 0,
        年: 0
      }
    }
  }
})

3. キャッシュする必要があるルータービューコンポーネントにキープアライブコンポーネントをラップします。

<キープアライブ>
   <router-view v-if='$route.meta.keepAlive'></router-view>
</キープアライブ>
<router-view v-if='!$route.meta.keepAlive'></router-view>

4. キャッシュが必要な場合とそうでない場合があるため、キャッシュされたコンポーネントのルーティングフック関数で判断することができます。

beforeRouteLeave (to、from、next) {
    this.loading = true
    to.path === '/goods_detail'の場合{
      from.meta.keepAlive = true
    } それ以外 {
      from.meta.keepAlive = false
     // this.$destroy()
    }
    次（）
  },

コンポーネントのキャッシュをサポートできますが、この方法にはバグがあります。まず、ページを初めて開いたときはキャッシュされません。つまり、リストページから詳細ページに初めてジャンプしたときは、戻ってきたときにキャッシュがありません。後で詳細ページに入るときにキャッシュされ、最初のエントリの状態のみがキャッシュされ、データは再度要求されません。ページAでカテゴリを選択してページBにジャンプし、次にBのリストページから詳細ページにジャンプした場合、この状態はこの時点でキャッシュされ、将来ページAの他のカテゴリからページBにジャンプしたときに再度キャッシュされません。そのため、詳細ページからページBに戻るたびに、最初のキャッシュの状態にジャンプします。プロジェクトにキャッシュする必要がある状態が1つだけある場合は、この方法の使用を検討できます。

2. include、exclude属性、beforeRouteEnterフック関数を使用する

まず、includeとexcludeのVueドキュメントを紹介します https://cn.vuejs.org/v2/api/#keep-alive
これはvue2.0以降に追加された新しい属性です
include はキャッシュする必要があるコンポーネントです。
除外は、一部を除くすべてのコンポーネントがキャッシュされることを意味します。
include 属性と exclude 属性を使用すると、コンポーネントを条件付きでキャッシュできます。どちらも、コンマ区切りの文字列、正規表現、または配列として表現できます。

<キープアライブを含める="a,b">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>
 
<!-- 正規表現 (`v-bind` を使用) -->
<キープアライブ:include="/a|b/">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>
 
<!-- 配列 (`v-bind` を使用) -->
<キープアライブ:include="['a', 'b']">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

最初に、コンポーネント自身の名前オプションに対して一致がチェックされます。名前オプションが使用できない場合は、ローカルに登録されている名前 (親コンポーネントの components オプションのキー値) に対して一致がチェックされます。匿名コンポーネントは一致できません。

max は 2.5.0 でのみ追加され、キャッシュできるコンポーネントインスタンスの最大数です。この数に達すると、最も長い時間アクセスされていないキャッシュされたコンポーネントインスタンスは、新しいインスタンスが作成される前に破棄されます。

<キープアライブ:max="10">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

有効化および無効化。

keep-alive に含まれるコンポーネント/ルートには、activated と deactivated という 2 つのライフサイクルフックが追加されることを簡単に説明します。
ドキュメント: 2.2.0 以降では、ツリー内のすべてのネストされたコンポーネントでアクティブ化と非アクティブ化がトリガーされます。
activated はコンポーネントが最初にレンダリングされるときに呼び出され、その後キャッシュされたコンポーネントがアクティブ化されるたびに呼び出されます。
通話開始時間:
マウント後、キャッシュされたルート/コンポーネントに初めて入ると、コールバック関数が次に渡される前に、beforeRouteEnter ガードが呼び出されます。

beforeMount=> 別のルート/コンポーネントから来た場合（キャッシュを離れるときにコンポーネントが破棄されるか非アクティブ化される）=>マウント済み=>アクティブ化キャッシュコンポーネントに入る=> beforeRouteEnter コールバックを実行する

コンポーネントはキャッシュされているため、キャッシュルート/コンポーネントに再度入るときにこれらのフックはトリガーされません: // beforeCreate created beforeMount mount はトリガーされません。

deactivated: コンポーネントが非アクティブ化される (ルートを離れる) ときに、keep-alive が使用されている場合、コンポーネントは破棄されずにキャッシュされるため、beforeDestroy (コンポーネント破棄前のフック) と destroyed (コンポーネント破棄) は呼び出されません。
このフックは beforeDestroy の代わりとして考えることができます。コンポーネントをキャッシュし、コンポーネントが破棄されたときに何かを実行したい場合は、このフックにそれを配置できます。
ルートを離れると、順番にトリガーされます:

現在のルートフックをコンポーネントに残す beforeRouteLeave => ルートフロントガード beforeEach => グローバルポストフック afterEach => 非アクティブ化キャッシュコンポーネントを残す => アクティブ化キャッシュコンポーネントに入る（キャッシュルートに入る場合）

プロジェクトでキャッシュを使用する方法:
1. 上記のように、作成したルーターオブジェクトに scrollBehavior メソッドを追加します。
2. キャッシュする必要があるコンポーネントをinclude属性に追加する

<キープアライブ:include="['ホーム','分類','検索']">
      <ルータービュー></ルータービュー>
</キープアライブ>

3. beforeRouteEnterの次のコールバック関数では、Aページをキャッシュする必要がない状況を初期化します。つまり、createで書き込むべきものをここに書きます。初期化が必要なすべてのデータを再度書き込むように注意してください。そうしないとバグが発生します。したがって、推奨されません。

beforeRouteEnter (to、from、next) {
    次(vm => {
      // `vm` を介してコンポーネントインスタンスにアクセスします if (from.path !== '/goods_detail') { // A からページ B に入るときに更新する必要があります vm.titleText = vm.$route.query.name
        vm.categoryUpper = vm.$route.query.categoryUpper
        vm.goods = []
        vm.ページ = 1
        vm.catsIndex = 0
        vm.is_search = 偽
        vm.getCats2()// は元々 create で記述されたさまざまな型です}
    })
  }

3. include、exclude属性、beforeRouteLeaveフック関数とvuexを使用する（推奨）

3 番目の方法は 2 番目の方法と似ていますが、キャッシュする必要があるコンポーネントがグローバル変数に保存され、ルーティングフック関数でキャッシュする必要があるコンポーネントとキャッシュする必要のないコンポーネントを柔軟に制御できる点が異なります。2 番目の方法と比較すると、データを毎回再初期化する必要はありませんが、データを vuex に保存する必要があります。
コードについて
1. 上記のように、作成したルーターオブジェクトに scrollBehavior メソッドを追加します。
2. キャッシュする必要があるコンポーネントをinclude属性に追加する

<キープアライブ:include="catch_components">
      <ルータービュー></ルータービュー>
</キープアライブ>

3. キャッシュするコンポーネントの変数名と対応するメソッドをストアに追加します。

デフォルトの新しいVuex.Storeをエクスポートします({
  州： {
    キャッチコンポーネント: []
  },
突然変異:
    GET_CATCHE_COMPONENTS (状態、データ) {
      state.catch_components = データ
    }
}
})

4. beforeRouteLeaveフック関数でキャッシュする必要があるコンポーネントを制御する

beforeRouteLeave (to, from, next) { //コンポーネントを離れるときにキャッシュする必要があるコンポーネントを制御します。そうしないと、最初にキャッシュされない状態が発生します。this.busy = true
    if (to.path === '/goods_detail') { // 詳細ページに移動するときにコンポーネントをキャッシュする必要があり、それ以外の場合はキャッシュは必要ありません this.$store.commit('GET_CATCHE_COMPONENTS', ['home'])
    } それ以外 {
      this.$store.commit('GET_CATCHE_COMPONENTS', [])
    }
    次（）
  },

さらに、私たちのプロジェクトでは、ルートは同じだがパラメータが異なる場合にコンポーネントが再利用され、更新されないという問題に遭遇しました。Vueはルートパラメータの変更に対する対応を公式に示しました。

時計：
    '$route' (to、from) {
      document.title = this.$route.query.name
      this.getDefault() //パラメータデータに応じて応答する}

  },

これで、vue での keepAlive の詳細な使用方法についての記事は終了です。vue での keepAlive の使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: