vueの鍵は何ですか-フロントエンドQ&A-php.cn

vueの鍵は何ですか

青灯夜游

リリース： 2022-12-01 20:24:52

オリジナル

4434 人が閲覧しました

vue では、キーは DOM オブジェクトの識別子、各 vnode の一意の ID、および diff の最適化戦略です。キーに基づいて、対応する vnode ノードをより正確かつ高速に見つけることができます。データが表示のみの場合は、インデックスをキーとして使用できます。インデックスをキーとして使用すると、後続の操作で順序が破壊され、効率上の問題が確実に発生し、深刻な場合には、間違った DOM がレンダリングされます。

vueの鍵は何ですか

#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

1. key とは

リストを表示する場合、デフォルトのキーはインデックスです。
データが表示のみに使用される場合は、インデックスをキーとして使用しても問題ありません。
インデックスをキーとして使用し、その後の操作で順序が破壊されると、間違いなく効率上の問題が発生し、深刻な場合には、間違った DOM がレンダリングされます。 [学習ビデオ共有:
vue ビデオチュートリアル、Web フロントエンドビデオ ]

キーの役割とその実装原理について話しましょう以下に一つずつ。

2. key の役割

key は Vue で使用される識別子です。より具体的に言うと、キーは Vue の仮想 DOM で使用され、実際の DOM には表示されません。

2.1 例を示します。

人事情報のグループを次の形式で表示します。リスト。

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    

<div>
    <h2>人员列表</h2>
    <ul>
        <li>
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            }
        })
    </script>

ログイン後にコピー

この HTML ファイルは、次のようにブラウザで開きます。

vueの鍵は何ですか #上記のサンプル HTML ファイルではキーが使用されていないため、問題はないようです。もちろん、キーを書き込まずにデータを表示するだけでも問題ありません。 [学習ビデオ共有:

vue ビデオチュートリアル

、Web フロントエンドビデオ ]次に、上記の例にキーを追加します。ここでは、各部分の ID を追加します。 data は key

ログイン後にコピー

{{p.name}}-{{p.age}}

key での表示結果は上記の結果と全く同じです。

vueの鍵は何ですか #そして、ブラウザ上で要素を表示すると、キーの存在がわかりません。

vueの鍵は何ですか

現時点では、次の 2 つの結論を導き出すことができます。 1. データの表示にのみ使用され、 key; 2. キーは実際の DOM には表示されません

実際には、キーが書き込まれていなくても、Vue は実際の DOM を生成するときにキーも使用します。デフォルトはデータインデックスです。 (index)

キーを

index

に置き換えます。表示されるデータは何も変わりません。

ログイン後にコピー

{{p.name}}-{{p.age}}

2.2 上記の例を変更します個人情報に基づいてインデックスを表示し、ボタンを追加します。ヘッダーに人事情報を追加する機能です。

上記の HTML ファイルを少し変更します。

nbsp;html>


    <meta>
    <title>key的原理</title>

    <!--引入vue-->
    <script></script>
    <link>


<div>
    <h2>人员列表</h2>
    <button>添加一个老刘</button>
    <ul>
        <li>
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>

    <script>
        const vm = new Vue({
            el:&#39;#root&#39;,
            data:{
                persons:[
                    {&#39;id&#39;:&#39;001&#39;, &#39;name&#39;:&#39;张三&#39;,&#39;age&#39;:&#39;18&#39;},
                    {&#39;id&#39;:&#39;002&#39;, &#39;name&#39;:&#39;李四&#39;,&#39;age&#39;:&#39;19&#39;},
                    {&#39;id&#39;:&#39;003&#39;, &#39;name&#39;:&#39;王五&#39;,&#39;age&#39;:&#39;20&#39;}
                ]
            },
            methods:{
                add(){
                    const p = {&#39;id&#39;:&#39;004&#39;, &#39;name&#39;:&#39;老刘&#39;,&#39;age&#39;:&#39;40&#39;}
                    this.persons.unshift(p)
                }
            }
        })
    </script>

ログイン後にコピー

Zhang San、Li Si、Wang Wu のインデックスがそれぞれ 0、1、2 に分割されていることがわかります。

vueの鍵は何ですかボタンをクリックすると、新しいキャラクターを 1 つ追加します。この時点でインデックスが変更されました。新しく追加されたキャラクター「Lao Liu」はインデックス 0 になりました。

は正しいようですが、間違っているようです

vueの鍵は何ですかもちろん、インデックスについて議論する場合、ここでまったく問題はありません。どこに「間違い」があるのかを示すために、新しい例を挙げてみましょう。

2.3例を再度変更します。インデックスは表示されなくなり、代わりに入力ボックスに置き換えられます。各文字の後ろにある入力ボックスに文字の姓を書き込み、文字列の変化を観察します。新しく挿入されたデータの後に元のデータ

html を少し変更します

ログイン後にコピー

{{p.name}}-{{p.age}}

実際の効果は以下のようになります

#この時点では、何も問題はないようです。 vueの鍵は何ですか次のステップは奇跡を目撃することです。

Lao Liu が追加した時点で、予想とは異なる問題が発生しました。

这是key为index的情况，如果修改为数据的唯一标识，则不会产生这样的问题。

ログイン後にコピー

{{p.name}}-{{p.age}}

诶，这就是我们想要的。

vueの鍵は何ですか
列表内有输入内容，后续操作破坏了原始顺序，如果以index作为key，就会产生错误DOM

3. key的实现原理

要解释key的实现原理，就要引入Vue一个十分重要的概念——【虚拟DOM】。

给出一组数据，Vue要把这些数据渲染到页面上，首先要生成【虚拟DOM】，然后根据【虚拟DOM】去生成【真实的DOM】。如果数据发生了改变，Vue会生成【新的虚拟DOM】，注意，这个【新的虚拟DOM】并不会直接生成【新的真实DOM】，否则虚拟DOM一点用处也没有了。Vue的操作是，拿根据新的数据生成的【新的虚拟DOM】与之前的【真实的DOM】去做比较，如果相同，直接延用即可（“拿来主义”）；如果不同，则生成新的DOM对象。

在这个过程中key扮演了很重要的角色。

根据最后一个示例进行剖析。