キープアライブキャッシュ

キープアライブキャッシュ

各クリックのライフサイクル全体を通過するコンポーネントを作成します、コンテンツ領域をそれぞれクリックしてナビゲーションをキャッシュせずに、それはコンポーネント、パフォーマンスのより多くの廃棄物を作成し、この時間は、私たちがいるかどうかを考慮に入れることができるようになりますクリックされたコンポーネントは、コンポーネントが、再びこの時間を訪問してきたクリックしたときに、それがキャッシュからコンポーネントを取得するのではなく、再作成し、その使用、キャッシュに作成されたキープアライブ。

 

キープアライブタグパッケージコンポーネントアセンブリ]タブ

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">

  <component :is="currentComponent"></component>

</keep-alive>

中ヴュー・ルータのアプリケーション

<keep-alive :include="whiteList" :exclude="blackList" :max="amount">

  <router-view></router-view>

</keep-alive>

含まキープアライブは、キャッシュが組み立てヒットしますホワイトリスト、キャッシュの定義を、除外アセンブリを打つ、定義されたブラックリストキャッシュはキャッシュされません。最大は上部アセンブリバッファ定義し、使用することは、LRUキャッシュ置換ポリシーデータの上限を超えています。

 

活性化、非アクティブ化

キープアライブ2つのライフサイクルに対応する：有効、無効

{（）活性化

    （「CONSOLE.LOG アクティブ状態」）。

}

失活（）{

    CONSOLE.LOG（ " ステートバッファ"）

}

 

キャッシュから読み込む場合と、時間コンポーネントをコンポーネントがアクティブになって、

キャッシュから読み出すとき B 、組立時にバッファ・ステータスのコンポーネント、ケースBの成分アクティブ状態で、

 

用途：

場合ブラウザの新規コンポーネントの場所に、私はに切り替えBの使用、次いで、成分（）位置を記録するバッファ状態アセンブリ機能を私は再び切り換えたときアクティブと状態関数を保存するために、成分場所

 

含まれ、除外

含める属性のみを示す名前の属性があるbookLists 、bookListsのコンポーネントがキャッシュされ、他のコンポーネントがキャッシュされない
除外加算示す属性を名前の属性indexListsは、コンポーネントをキャッシュされない、他のコンポーネントがキャッシュされる

=「bookListsが含まれるキープアライブ< 、bookLists「>

      <ルータビュー> </ルータビュー>

</キープアライブ>

<キープアライブ除外=「indexLists」>

      <ルータビュー> </ルータビュー>

</キープアライブ>

 

注：名前は、コンポーネントの名前ではなく、名前をルーティング

VUE ファイル

<テンプレート> ... </テンプレート>

<スクリプト>

輸出のデフォルト{

  名前：「bookLists」、

  データ：（）{

    リターン{}

}

}

</ SCRIPT>

使用するメタプロパティを

で router.js プロパティルートを設定

    {

      パス： '/' について、

      名前：「約」、

      コンポーネント：（）=>インポート（/ * webpackChunkName： "約" * / './views/About.vue'）、

      メタ：{

        キープアライブ：真//コンポーネントをキャッシュします

      }

    }、

    {

      パス： '/ vuexTry'

      成分：（）=>インポート（ './ビュー/ vuexTry.vue'）、

      メタ：{

        キープアライブ：falseを//コンポーネントをキャッシュする必要はありません。

      }

    }

 

<キープアライブ>

  <ルータ・ビューV-IF = "この。$ route.meat.keepAlive"> </ルータビュー>

  <！ - ここにそれがキャッシュされるコンポーネント- >

</キープアライブ>