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 をよろしくお願いいたします。

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