Vue3におけるキーの役割と動作原理についての簡単な説明

Vue3におけるキーの役割と動作原理についての簡単な説明

このキー属性の機能は何ですか?まずは公式の説明を見てみましょう。

  • kekey 属性は主に、新しいノードと古いノードを比較するときに Vnode を識別するために、Vue の仮想 DOM diff アルゴリズムで使用されます。
  • キーを使用しない場合、Vue は動的要素を最小限に抑え、可能な限り同じタイプの要素を変更/再利用しようとするアルゴリズムを使用します。
  • キーを使用すると、キーの変更に基づいて要素の順序が並べ替えられ、キーに存在しない要素が削除/破棄されます。

VNode についての私の理解を簡単に述べたいと思います。

  • VNode の正式名称は Virtual Node で、仮想ノードです。
  • Vnode の本質は JavaScript オブジェクトです。
  • 実際、Vue では、コンポーネントと個々の要素の両方が VNode として表されます。

例えば:

<div class="title" style="color: red;">こんにちは世界</div>
// 実際には Vue では次のように表現されます:
定数VNode = {
    タイプ: "div",
    小道具: {
        クラス: "タイトル",
        スタイル: {
            色: 「赤」        
        }    
    },
    children: "Hello World" // div に他のタグが含まれている場合は、同様に子に変換されます}

どのような状況で f の挿入が最も効率的でしょうか?

アイデア:

  • 一度再レンダリングする(パフォーマンスを大幅に消費します)
  • 以前の VNode は変更されず、挿入位置から再レンダリングされます (パフォーマンスが大幅に消費されます)
  • すべての VNnode が再レンダリングされ、新しく追加された VNode のみを挿入する必要があります (最高のパフォーマンス)

結論:最高のパフォーマンスを得るには、新しい VNode と古い VNode にキーを設定し、古い VNode と新しい VNode をキー値で比較して、追加または削除する必要がある VNode を見つける必要があります。他の VNode は可能な限り変更しないでください。新しい VNode と古い VNode を比較するプロセスが、diff アルゴリズムです。

Vue は実際にはキーがある場合とない場合の 2 つの異なるメソッドを呼び出します。ソース コードを見てみましょう: (packages\runtime-core\src\renderer)

キーの場合は、patchKeyedChildren メソッドを実行します。

キー値がない場合は、patchUnkeyedChildren メソッドを実行します。

注意: キー値がない場合、リストが多すぎると、パッチが 1 つずつ実行され、パフォーマンスが大幅に低下します。キー値を追加すると、パフォーマンスの低下を大幅に防ぐことができます。

結論は:

したがって、キー値は、DOM ツリーが diff アルゴリズムを実行するときに役割を果たします。 1 つの機能は、新しい Vnode と古い Vnode が同じであるかどうかを判断して、比較とレンダリングの次のステップを実行することです。 もう 1 つの機能は、コンポーネントを再利用できるかどうか、および再レンダリングする必要があるかどうかを判断することです。

Vue3 におけるキーの役割と動作原理に関するこの記事はこれで終わりです。Vue3 におけるキーの役割と動作原理の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue リストレンダリングでキーが果たす役割の詳細な説明
  • Vueにおけるキーの役割と原理の詳細な説明
  • Vueリストレンダリングキーの原理と機能の詳細な説明

<<:  Alibaba Cloud Server で MySQL デュアルマシン ホットスタンバイを手動で実装する 2 つの方法

>>:  Linux trコマンドの使い方

推薦する

純粋な CSS3 で蝶が羽ばたく様子を再現する例

純粋なCSS3で蝶が羽ばたく様子を再現。まずはその効果をご覧ください どうですか?効果はかなりいいで...

Linx awk入門チュートリアルの詳細な説明

Awk はテキスト ファイルを処理するためのアプリケーションであり、ほぼすべての Linux システ...

HTML 5 ワーキングドラフトの謎を解く

World Wide Web Consortium (W3C) は、HTML 5 仕様のドラフトをリ...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...

CSSは2つの要素をブレンドする効果(スティッキー効果)を実現します。

数年前、Taobaoのモバイル版の左下隅に面白い丸いボタンがあったことを覚えています。それをクリック...

MySQL のスケジュールされた完全なデータベースバックアップ

目次1. MySQLデータのバックアップ1.1、データをバックアップするためのmysqldumpコマ...

HTML 編集の基礎 (初心者必読)

DREAMWEAVER を開き、新しい HTML を作成します。 。ボディの特性: bgcolor...

Nginx における accept lock の仕組みと実装の詳細な説明

序文nginx はマルチプロセス モデルを使用します。リクエストが届くと、システムはプロセスをロック...

Windows Server 2008 R2 リモート デスクトップのポート 3389 を変更する方法

Windows サーバー リモート デスクトップのデフォルトのポート番号は 3389 です。職場でサ...

Ubuntu で apt-get を使用して mysql をインストールおよび完全にアンインストールする方法の詳細な説明

1. mysqlをインストールします。 udo apt-getでmysql-serverをインストー...

jQueryはすべてのショッピングカート機能を実装します

目次1. すべて選択2. 商品の数量を増やすか減らす3. 商品の小計を変更する4. 合計と合計額を計...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

MySQL シリーズ 11 ログ

チュートリアルシリーズMySQL シリーズ: MySQL リレーショナル データベースの基本概念My...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要

重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...