Vue でのキープアライブコンポーネントの使用例

問題の説明（キープアライブとは何か）

キープアライブ名前の通り、アクティブな状態を維持します。誰が活動を続けるのか?
まず、vue はコンポーネントベースのプログラミングなので、.vue ファイルはコンポーネントであることがわかっています。他のすべてと同様に、誕生から消滅までのライフサイクルがあります。同じことが Vue コンポーネントにも当てはまり、コンポーネントを作成する create、コンポーネントにデータをハングさせる mount、コンポーネントにハングされているデータを更新するための update、コンポーネントインスタンスを破棄するための destroy など、独自のライフサイクルがあります。
したがって、keep-alive を使用すると、コンポーネントをアクティブに保ち、destroy によって破壊されないため、常にアクティブな状態になります。コンポーネントが破棄されない場合は、コンポーネントにマウントされているデータがまだ存在するため、状態を保持できます。そのため、keep-alive はコンポーネントの状態を維持できます。

また、httpプロトコルのリクエストヘッダーには、http呼び出しを維持するためのキープアライブがあります。次のようにします。接続：キープアライブ機能は異なりますが、考え方は同じです。つまり、状態をアクティブに保ちます。

キープアライブの効果を確認するための小さなデモ

デモは上部のルーティングナビゲーション部分と下部のコンテンツ領域部分に分かれています。上のルートナビゲーションをクリックすると、ルートビューに対応するルートコンポーネントが表示されます。効果図は以下のとおりです。

キープアライブなしの効果図

対応するコード

// <template> 内の #App.vue
  <div class="box">
    <!-- ルートナビゲーション-->
    <div class="nav">
      <router-link to="/">ホームページへ移動</router-link>
      <router-link to="/about">about ページへ移動</router-link>
      <router-link to="/detail">詳細ページへ移動</router-link>
    </div>
    <!-- ルートナビゲーションに対応するコンテンツ領域 -->
    <メイン>
      <ルータービュー></ルータービュー>
    </メイン>
  </div>
</テンプレート>

// home.vue にチェックボックスを配置します <el-checkbox v-model="checked">options</el-checkbox>

// about.vue に入力ボックスを配置します <el-input v-model="input" placeholder="Please enter content"></el-input>

// detail.vue のドロップダウン ボックス <el-select v-model="value" placeholder="Please select">
  <el-オプション
    v-for="オプション内の項目"
    :key="アイテム.値"
    :label="アイテム.ラベル"
    :value="アイテムの値"
  >
  </el-option>
</el-select>

分析する

ルータービューコンポーネントをラップするキープアライブコンポーネントを使用しなかった場合、左側でホームページを確認し、概要ページで情報を入力し、詳細ページでドロップダウンで情報を選択するという操作を実行しました。ルーティングページを離れて戻ってきたときに、ドロップダウンで情報を確認、入力、選択するといった、以前に実行していた操作が存在しなくなり、以前の状態が消えていることがわかりました。理由は非常に簡単です。ルーティングページを離れると、ルーティングページに対応するコンポーネントの destroy フックメソッドがトリガーされ、ルーティングページに対応するコンポーネントが破棄されます。コンポーネントが破棄されると、コンポーネントにマウントされていたデータは消えてしまいます。
同時に、右側の Vue.js 開発ツールでは、ルータービュービューレイヤーが常にホーム、アバウト、詳細の各コンポーネント間を切り替えていることがわかります。コンポーネントの切り替えは、実際にはコンポーネントの継続的な作成と破棄のプロセスです。次に、keep-alive を使用した場合の効果を見てみましょう。

キープアライブ使用時の効果図

対応するコード

<テンプレート>
  <div class="box">
    <!-- ルートナビゲーション-->
    <div class="nav">
      <router-link to="/">ホームページへ移動</router-link>
      <router-link to="/about">about ページへ移動</router-link>
      <router-link to="/detail">詳細ページへ移動</router-link>
    </div>
    <!-- ルートナビゲーションに対応するコンテンツ領域 -->
    <メイン>
      <keep-alive> <!-- keep-alive でラップするとキャッシュできます -->
        <ルータービュー></ルータービュー>
      </キープアライブ>
    </メイン>
  </div>
</テンプレート>

分析する

ビューレイヤーコンポーネントを keep-alive でラップすると、ルートが切り替えられても、チェック、入力、ドロップダウンしたコンテンツが失われないことがわかります。つまり、keep-alive は、以前のコンポーネントの状態を保存するために使用されます。

同時に、右側の Vue.js 開発ツールでは、router-view ビューで切り替えられた対応するコンポーネントがすでに非アクティブ状態になっていることがわかります。英語で「非アクティブ」とは、非アクティブで未使用という意味で、つまりキャッシュされていて破棄されていないことを意味します。したがって、コンポーネントに対して実行した操作とコンポーネントの状態はキャッシュされるため、ドロップダウンでチェック、入力、選択した内容はそのまま残ります。

Vue.js devtools は非常に便利で、Google からダウンロードできます。これは、Vue 開発に適したツールです。

疑問を投げかける

これを見ると、keep-alive を直接追加すると、ルータービュー階層の下にあるビューのすべてのコンポーネントがキャッシュされることがわかります。ただし、すべてをキャッシュするのではなく、一部だけをキャッシュしたい場合があります。どうすればよいでしょうか。それは問題ではありません。大手企業がすでに検討し、事前に解決してくれています。つまり、keep-aliveのinclude属性とexclude属性です。

includeとexcludeは特定のコンポーネントをキャッシュするかどうかを指定します

属性を含める

include は含めるという意味です。値は文字列、正規表現、または配列です。 include の値と同じ名前のコンポーネントのみがキャッシュされます。つまり、キャッシュするコンポーネントを指定できます。キャッシュするコンポーネントを複数指定することもできます。ここでは、複数のコンポーネントキャッシュを指定するための例として文字列を取り上げます。構文は、それらをコンマで区切ります。次のように：

//ホームコンポーネントとアバウトコンポーネントがキャッシュされることを指定します <keep-alive include="home,about" >
    <ルータービュー></ルータービュー>
</キープアライブ>

除外属性

Exclude は include の反意語に相当し、これは例外を意味し、キャッシュされないコンポーネントを指定します。使用方法は include と似ており、次のようになります。

// ホームとアバウトコンポーネント以外のすべてをキャッシュします。この例では、詳細コンポーネントのみがキャッシュされます <keep-alive exclude="home,about" >
    <ルータービュー></ルータービュー>
</キープアライブ>

include="about,detail"を例に挙げる

この構文は、about と detail のみがキャッシュされ、他のコンポーネントはキャッシュされないことを意味します。下の図の Vue ツールを見ると、キャッシュされたコンポーネントが対応する表示ルートにない場合は非アクティブになることもわかります。

include 属性と exclude 属性に加えて、keep-alive には max 属性もあります。この max 属性は、通常、あまり使用されません。その主な目的は、キャッシュされたコンポーネントの数を制御することです。後でキャッシュされたコンポーネントは、以前にキャッシュされたコンポーネントを排除します。これは、キャッシュ最適化戦略と同等です。結局のところ、適切なキャッシュはユーザーエクスペリエンスを向上させますが、過剰なキャッシュはコンピューターの速度を低下させます。

include と exclude の属性値はコンポーネントの名前です。

include と exclude の属性値は、コンポーネントの名前、つまり、コンポーネントの name 属性値、つまり、以下に示す name 属性値です。

<スクリプト>
    エクスポートデフォルト{
      名前:「アプリ」
      // ...
    };
</スクリプト>

疑問を投げかける

コンポーネントには対応するロジックjsパーツがあり、コンポーネントはデータを取得するためにリクエストを送信する必要があることはわかっています。通常、バックエンドのビッグネームにデータを要求するために、createフックまたはmountedフックでリクエストを送信します。キープアライブを使用した後のコンポーネントのフック機能の問題に関しては、次の点に注意する必要があります。

キープアライブフック関数の実行順序

まず、keep-alive コンポーネントを使用した後、アクティブ化されたフックと非アクティブ化されたフックがコンポーネントに自動的に追加されます。

activated はコンポーネントがアクティブ化（使用）されたときにトリガーされます。これは、このページに入るときにトリガーされることを意味します。
deactivated はコンポーネントが使用されていないとき（非アクティブ状態）にトリガーされ、このページを離れるときにトリガーされるものとして簡単に理解できます。

コンポーネントフックの実行順序の入力と終了

ホームコンポーネントのみをキャッシュすると仮定して、コードを確認し、フック内の対応する順序を出力してみましょう。フックが実行される順序がわかり、自分でやってみて感動するでしょう

コードは次のとおりです

<テンプレート>
<div>
  <el-checkbox v-model="checked">オプション</el-checkbox>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: "ホーム",
data() { 戻り値 { チェック済み: false } },
作成された() {
  console.log("私は作成されたフックです");
},
マウント() {
  console.log("私はマウントされたフックです");
},
アクティブ化() {
  console.log("フックがアクティブ化されました");
},
非アクティブ化() {
  console.log("私は非アクティブ化されたフックです");
},
破棄する前に() {
  console.log("私は beforeDestroy フックです"); したがって、次のように結論付けることができます。
},
};
</スクリプト>

コンポーネントを入力し、次のように結果を出力します。

私は作成されたフックです私はマウントされたフックです私はアクティブ化されたフックです

コンポーネント印刷をそのままにした結果は以下のとおりです

私は無効化されたフックです

結論を導く

最初のエントリと出口が作成 ---> マウント ---> アクティブ化 --> 非アクティブ化
後続のエントリと終了が有効 --> 無効

したがって、activated フックと deactivated フックでロジック処理を実行できます。これらの 2 つのフックは、mounted フックと beforeDestroy フックに少し似ていますが、それでも異なります。結局のところ、キープアライブを使用してもコンポーネントは破壊されない

キープアライブアプリケーションシナリオの例

テーブル内のデータ項目の詳細ページを表示すると、返されるステータスは、前のフィルター結果や前のページ数など、以前のステータスのままになります。
入力ボックス、ドロップダウンボックス、スイッチスイッチなど、ルートがジャンプバックした後も、入力されたフォームの内容が残っています。ユーザーは多くのことを入力しており、ジャンプバックした後でクリアすることはできません。ユーザーに再度入力させることはできませんよね？
とにかく、以前の状態を維持するだけです。実際には、具体的な適用シナリオは多数ありますが、ここでは詳しく説明しません...

補充する

上記では、keep-alive が router-view をラップする小さなケースを使用して説明しました。実際、keep-alive は通常、router-view または動的コンポーネントコンポーネントのいずれかをラップします。コード自体は実際は同じです。動的コンポーネントのラッピングの使用方法は次のとおりです。

<keep-alive include="home" exclude="about">
     <component :is="どのコンポーネント"></component>
</キープアライブ>

keep-alive の include 属性と exclude 属性も v-bind の構文をサポートしているため、非常に柔軟性があります。

要約する

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

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