問題の説明(キープアライブとは何か)
また、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> 分析する
キープアライブ使用時の効果図対応するコード <テンプレート> <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 コンポーネントを使用した後、アクティブ化されたフックと非アクティブ化されたフックがコンポーネントに自動的に追加されます。
コンポーネントフックの実行順序の入力と終了 ホーム コンポーネントのみをキャッシュすると仮定して、コードを確認し、フック内の対応する順序を出力してみましょう。フックが実行される順序がわかり、自分でやってみて感動するでしょう コードは次のとおりです <テンプレート> <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法
>>: MySQL の order by ステートメントの最適化方法の詳細な説明
1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...
序文:今日、「<!DOCTYPE> タグを注意深く理解しましたか?」と尋ねられました。私...
序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...
アルファベット順DTD: このタグが許可される XHTML 1.0 DTD を示します。 S=厳密、...
目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...
この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...
MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...
目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...
グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...
HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...
この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...
この記事では、価格カレンダー効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
目次1. はじめに2. データベースをバックアップする3. オリジナルのMysqlをアンインストール...
導入1.<iframe> タグ: iframe は、ページ内に内部フレームを生成するイン...