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コマンドの使い方

推薦する

UCenter ホームサイトに統計コードを追加

UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...

JD.com フラッシュセール効果を実現する JavaScript

この記事では、JD.comのフラッシュセール効果を実現するためのJavaScriptの具体的なコード...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

react+reduxを使用してカウンター機能を実装すると発生する問題

Redux はシンプルな状態マネージャーです。その歴史をたどることはしません。使用法の観点から見ると...

MySQL Strict Modeの知識ポイントの詳細な説明

I. 厳密モードの説明MySQL 5.0 以降の厳密モード (STRICT_TRANS_TABLES...

Reactのコンポーネント作成方法のまとめ

目次1. 関数を使用してコンポーネントを作成する2. クラスを使用してコンポーネントを作成する3. ...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題

最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...

Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法

ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...

角度コンテンツ投影の詳細な説明

目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...

CSS3 疑似クラスセレクターの簡単なレビュー

序文CSS がフロントエンド開発の基本的なスキルであるならば、「セレクター」は基礎中の基礎です。これ...

EclipseでTomcatを作成する原理の詳細な説明

ローカルEclipse上にTomcatサーバーを作成する場合、 tomcaインストールディレクトリの...

MySQL InnoDB アーキテクチャの概要

目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...

Zabbixを使用してMySQLを監視する方法

Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...