ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

ソースコードの観点からキープアライブコンポーネントのキャッシュ原理に答える

今日は、早速本題に入り、面接中に尋ねられた質問、つまりキープアライブ コンポーネントのキャッシュ原理についてお話ししましょう。

公式APIの紹介と使用方法

  • <keep-alive> 動的コンポーネントをラップする場合、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。
  • <transition> と同様に、<keep-alive> は抽象コンポーネントです。DOM 要素自体はレンダリングされず、コンポーネントの親コンポーネント チェーンにも表示されません。
  • <keep-alive> でコンポーネントが切り替えられると、それに応じてアクティブ化および非アクティブ化されたライフサイクル フック関数が実行されます。

公式サイトの例では、タブ切り替えによってユーザーの操作が保存されています。実際には、一覧ページから詳細ページにジャンプし、一覧ページに戻るという状況にも遭遇する可能性があります。ユーザーのフィルタリング操作を保存する必要があり、そのためには <keep-alive> を使用する必要があります。これにより、再レンダリングを回避し、ページのパフォーマンスを向上させることもできます。

使用方法と小道具の説明

// 動的コンポーネントでのキープアライブコンポーネントの使用。その他の使用方法については、公式ウェブサイト <keep-alive
 include="['コンポーネント名A', 'コンポーネント名B']"
 除外="'コンポーネント名C'"
 :max="10">
 <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

  • include - 文字列または正規表現または配列、名前に一致するコンポーネントがキャッシュされます
  • exclude - 文字列または正規表現または配列。名前に一致するコンポーネントはキャッシュされません。
  • max - 文字列または数値、キャッシュされたコンポーネント インスタンスの最大数。最も長い時間アクセスされていないインスタンスは破棄されます。

知らせ:

  • <keep-alive> は直行の 1 つのコンポーネントのみをレンダリングするため、<keep-alive> 内で v-for を使用すると機能しません。条件を満たす条件が複数ある場合も同様です。
  • include と exclude が一致する場合、最初にコンポーネントの名前オプションがチェックされます。名前オプションが使用できない場合は、ローカルに登録された名前 (つまり、親コンポーネントの components オプションのキー値) が一致します。匿名コンポーネントは一致できません。
  • <keep-alive> はインスタンスをキャッシュしないため、機能コンポーネントでは正しく動作しません。

ソースコードの解釈

まずソースコードの画像を投稿する

全部で125列ありますが、片付けてみるとそんなにたくさんのものは入っていません。最初に、必要なメソッドをいくつか紹介し、次にキープアライブコンポーネント自体が使用するメソッドをいくつか定義します。最後に、keep-alive というコンポーネントオプションが外部に公開されます。abstract を除いて、これらすべてのオプションはよく知られています。その中でも、レンダリング関数はキャッシュ原則の最も重要な部分です。また、キープアライブコンポーネントは機能コンポーネントであることがわかります。

// isRegExp 関数は正規表現かどうかを判定し、remove は配列内のメンバーを削除します。// getFirstComponentChild は VNode 配列の最初の有効なコンポーネントを取得します。import { isRegExp, remove } from 'shared/util'
'core/vdom/helpers/index' から { getFirstComponentChild } をインポートします。
​
type VNodeCache = { [key: string]: ?VNode }; // キャッシュコンポーネントのキャッシュタイプ VNode​
// コンポーネント名またはコンポーネントタグでコンポーネント名を取得します (上記の 2 番目のポイント)
関数 getComponentName (opts: ?VNodeComponentOptions): ?string {
 opts && (opts.Ctor.options.name || opts.tag) を返します
}
​
// include または exclude がコンポーネント名に一致するかどうかを判定します。関数 matches (pattern: string | RegExp | Array<string>, name: string): boolean {
 if (Array.isArray(パターン)) {
 return pattern.indexOf(name) > -1 // include または exclude は配列です} else if (typeof pattern === 'string') {
 return pattern.split(',').indexOf(name) > -1 // include または exclude は文字列です } else if (isRegExp(pattern)) {
 return pattern.test(name) // include または exclude は正規表現です}
 false を返します // いずれも一致しません (上記の 2 番目と 3 番目の点に注意してください)
}
​
// キャッシュを破棄する function pruneCache (keepAliveInstance: any, filter: Function) {
 const { cache, keys, _vnode } = keepAliveInstance // キープアライブコンポーネントインスタンス for (const key in cache) {
 const cachedNode: ?VNode = cache[key] // キャッシュされたコンポーネント if (cachedNode) {
  定数名: ?string = getComponentName(cachedNode.componentOptions)
  // 名前が存在し、include または exclude に一致しない場合は、キャッシュされたコンポーネントを破棄します if (name && !filter(name)) {
  pruneCacheEntry(キャッシュ、キー、キー、_vnode)
  }
 }
 }
}
​
//キャッシュエントリを破棄する関数pruneCacheEntry(
 キャッシュ: VNodeCache、
 キー: 文字列、
 キー: 配列<文字列>,
 現在の?: VNode
){
 const cached = cache[key] // キャッシュされたコンポーネント // 変更があった場合に「コンポーネントのキャッシュを継続するかどうか」 // コンポーネントがキャッシュされていて、現在のコンポーネントが存在しないか、キャッシュされたコンポーネントのタグが現在のコンポーネントのタグと等しくない場合 if (cached && (!current || cached.tag !== current.tag)) {
 // これは、コンポーネントをキャッシュする必要がなくなったことを意味します。コンポーネントインスタンスを破棄します。cached.componentInstance.$destroy()
 }
 cache[key] = null // キャッシュ内のこのコンポーネントをnullに設定する
 remove(keys, key) // このコンポーネントのキーをキー配列から削除します}
​
// 例 type const patternTypes: Array<Function> = [String, RegExp, Array]
​
// キープアライブコンポーネントのいくつかのオプションを公開する export default {
 name: 'keep-alive', // コンポーネント名 abstract: true, // keep-alive は抽象コンポーネントです​
 // キープアライブコンポーネントを使用するときに渡される3つのプロパティ
 小道具: {
 含まれるもの: パターンタイプ、
 除外: パターンタイプ、
 最大: [文字列、数値]
 },
​
 作成された(){
 this.cache = Object.create(null) // キャッシュする必要があるコンポーネントを保存します this.keys = [] // キャッシュする必要がある各コンポーネントのキー、つまり this.cache オブジェクトに対応するキー値を保存します},
​
 // キープアライブコンポーネントを破棄するときは、キャッシュ内の各コンポーネントを破棄します。destroyed() {
 for (const キー in this.cache) {
  キャッシュエントリを削除します(this.cache、キー、this.keys)
 }
 },
​
 // キープアライブコンポーネントがマウントされると、include と exclude の変更を監視し、条件が満たされるとキャッシュされたコンポーネントを破棄します。mounted() {
 this.$watch('include', val => {
  pruneCache(this、name => matches(val、name))
 })
 this.$watch('exclude', val => {
  pruneCache(this、name => !matches(val、name))
 })
 },
​
 // ポイントはここです render () {
 const slot = this.$slots.default // キープアライブコンポーネントのデフォルトスロット const vnode: VNode = getFirstComponentChild(slot) // デフォルトスロットの最初の有効なコンポーネントを取得します // vnode が存在する場合は、vnode のオプションを取得します const componentOptions: ?VNodeComponentOptions = vnode && vnode.componentOptions
 if (コンポーネントオプション) {
  //最初の有効なコンポーネントの名前を取得します
  定数名: ?string = getComponentName(componentOptions)
  const { include, exclude } = this // props によって渡される include と exclude
  もし (
  // include が存在し、name が存在しないか、name が一致しない場合 (include && (!name || !matches(include, name))) ||
  // exclude が存在し、name が存在するか、name が一致する場合 (exclude && name && matches(exclude, name))
  ){
  return vnode // キャッシュは不要であり、このコンポーネントはレンダリングのために直接返されることを示します}
  
  // 一致した場合はキャッシュ操作が必要です const { cache, keys } = this // キープアライブコンポーネントのキャッシュコンポーネントと、キャッシュコンポーネントに対応するキー
  // 最初の有効なコンポーネントのキーを取得します
  定数キー: ?string = vnode.key == null
  // 同じコンストラクターを異なるローカル コンポーネントとして登録できます // cid だけでは不十分なので、連結してみましょう。componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '')
  : vnode.キー
  // このコンポーネントがキャッシュにヒットした場合 if (cache[key]) {
  // このコンポーネントインスタンスはキャッシュ内のコンポーネントインスタンスに置き換えられます vnode.componentInstance = cache[key].componentInstance
  // keysremove(keys, key) 内の現在のキーの位置を更新します // keys から現在のキーを削除しますkeys.push(key) // それを keys の末尾に配置します} else {
  // キャッシュにヒットしない場合は、このコンポーネントをキャッシュに追加します。cache[key] = vnode
  keys.push(key) // このコンポーネントのキーをキーの末尾に配置します // キャッシュ内のコンポーネントの数が渡された最大値を超える場合、キャッシュ内の LRU コンポーネントを破棄します if (this.max && keys.length > parseInt(this.max)) {
   キャッシュエントリを削除します(キャッシュ、キー[0]、キー、this._vnode)
  }
  }
​
  vnode.data.keepAlive = true // このコンポーネントのkeepAliveプロパティをtrueに設定します
 }
 // 最初の有効なコンポーネントが存在するが、そのcomponentOptionsが存在しない場合は、レンダリングのためにこのコンポーネントを返します。 // または、有効な最初のコンポーネントが存在しないが、keep-aliveコンポーネントのデフォルトスロットが存在する場合は、レンダリングのためにデフォルトスロットの最初のコンポーネントを返します。 return vnode || (slot && slot[0])
 }
}

補充:

最初の古いキャッシュ コンポーネントを削除し、キャッシュ コンポーネント キーを更新する上記の順序では、実際には LRU キャッシュ削除戦略が使用されます。
LRU は Least Recently Used の略で、最も最近使われていないものを意味するメモリ管理アルゴリズムです。
このアルゴリズムは、「長期間使用されていないデータは将来も使用される可能性が低い」という仮定に基づいています。したがって、データが占有するメモリが特定のしきい値に達すると、最も最近使用されていないデータが削除されます。

要約する

簡単に要約すると次のようになります。

キープアライブコンポーネントがレンダリングされるとき、渡された include と exclude に従って、キープアライブでラップされた名前付きコンポーネントと一致します。一致しない場合は、レンダリングのために名前付きコンポーネントを直接返します。一致した場合は、キャッシュ操作を実行します。コンポーネントがすでにキャッシュに存在する場合は、そのインスタンスが置き換えられ、keys 内のコンポーネントのキーの位置が更新されます。コンポーネントがキャッシュに存在しない場合は、コンポーネントがキープアライブコンポーネントのキャッシュに配置され、keys にコンポーネントのキーが配置されます。include と exclude はマウント時に監視されるため、後でこの 2 つの属性の値が変化すると、条件が満たされているかどうかが再度判断され、コンポーネントが破棄されます。

これで、ソース コードの観点からキープアライブ コンポーネントのキャッシュの原理に答えるこの記事は終了です。キープアライブ コンポーネントのキャッシュに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue のキープアライブ組み込みコンポーネント キャッシュのサンプル コード
  • コンポーネント キャッシュを動的に削除する Vue キープアライブの例

<<:  MySQL 5.7.17 winx64 のインストールと設定のグラフィックチュートリアル

>>:  Windows が MySQL サービスを開始できず、エラー 1067 を報告する場合の解決策

推薦する

JavaScript 関数をよりエレガントにする方法

目次分割代入を使用したオブジェクトパラメータコールバック関数の命名条件文を説明的にするスイッチ文をM...

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

Linuxサーバーのディスク容量を拡張する方法

目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

IE6かどうかを判定する最短JS(IEの書き方)

ブラウザが IE のどのバージョンであるかを検出するためによく使用される JavaScript コー...

Linux でのファイル コンテンツの重複排除と交差と差異の実装

1. データ重複排除日常業務では、Hive や Impala を使用してクエリとエクスポートを行う際...

Linux dirnameコマンドの具体的な使い方

01. コマンドの概要dirname - ファイル名からディレクトリ以外のサフィックスを削除しますd...

MySQL 正規表現 (regexp と rlike) の検索機能の例分析

この記事では、例を使用して MySQL 正規表現 (regexp および rlike) の検索機能を...

MySQLクエリで大文字と小文字を区別しない問題を解決する方法

質問最近、SSH フレームワークを使用して実用的なプロジェクトを完了していたときに、長い間悩まされて...

HTML 選択ボックスのプレースホルダーの作成に関する問題

テキスト入力でプレースホルダーを使用していますが、問題なく動作します。しかし、選択ボックスにはプレー...

nginx設定ファイルの解釈の詳細な説明

nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...

入力ボックスのプレースホルダーテキストのデフォルトの色を変更する -webkit-input-placeholder メソッド

HTML5 では、入力用のネイティブ プレースホルダー属性が追加されており、これは高度なブラウザでサ...

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...

MySQLの左結合と内部結合について簡単に説明します

序文最近、X 省のコールド チェーン トレーサビリティ システムの開発で忙しくしています。毎日午後 ...

Windows 環境に mysql-8.0.11-winx64 をインストールする際に発生する問題を解決する

MySQL インストール パッケージをダウンロードします。mysql-8.0.11-winx64 を...