What is the key of vue-Front-end Q&A-php.cn

In vue, key is the identifier of the DOM object, a unique id for each vnode, and an optimization strategy for diff; the corresponding vnode node can be found more accurately and faster based on the key. If the data is only for display, you can use index as the key; if you use index as the key, subsequent operations will destroy the order, which will definitely cause efficiency problems, and in serious cases, the wrong DOM will be rendered.

What is the key of vue

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

1. What is key

key is the identifier of the DOM object in Vue; key is the unique id given to each vnode , which is also an optimization strategy for diff. It can find the corresponding vnode node more accurately and faster based on the key.
When displaying a list, the default key is index.
If the data is only used for display, there is no problem in using index as the key.
If you use index as the key, and subsequent operations will destroy the order, it will definitely cause efficiency problems, and in serious cases, the wrong DOM will be rendered. [Learning video sharing: vue video tutorial, web front-end video]

Regarding the role of key and its implementation principle, let’s talk about it one by one below.

2. The role of key

key is an identifier that is used in Vue. To be more specific, the key is used in the virtual DOM in Vue and will not appear in the real DOM.

2.1 Give an example

Display a group of personnel information in the form of a list.

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>

Copy after login

This html file opens in the browser as shown below.

What is the key of vue

#The key is not used in the above example html file, and there seems to be no problem. Of course, there will be no problem simply displaying data without writing the key. [Learning video sharing: vue video tutorial, web front-end video]

Now we add a key to the above example, here the id of each piece of data is the key

Copy after login

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

The display result with key is exactly the same as the result above.

What is the key of vue

#And if we view the element on the browser, we will not see the existence of the key.

What is the key of vue

As of now, we can draw two conclusions: 1. It is only used for data display, and there is no impact if you don’t write the key; 2. The key will not Appears in the real DOM

In fact, even if the key is not written, Vue also uses the key when generating the real DOM. The default is the data index (index)

We put the key Replace it with index, and the displayed data will not change in any way.

Copy after login

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

2.2 Modify the above example

Display the index based on the person information and add a button , the function is to add personnel information in the header

Slightly modify the above html file.

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>

Copy after login

We can see that the indexes of Zhang San, Li Si and Wang Wu are divided into 0, 1, 2 respectively

What is the key of vue

Click the button to add one New character, the index has changed at this time, the newly added character "Lao Liu" has become index 0, seems right, but also seems wrong

What is the key of vue

Of course, there is no problem at all in simply discussing indexes. Let’s give a new example to show where the “wrong” lies

2.3 Modify the example again

The index is no longer displayed. It is replaced by an input box. Write the character’s last name in the input box behind each character and observe the changes in the original data after the newly inserted data

Modify the html a little

Copy after login

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

The actual effect is like the picture below

What is the key of vue

At this point, there seems to be nothing wrong, The next step is to witness the miracle At the moment

added Lao Liu, a problem occurred, which was different from what we expected.

What is the key of vue

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

Copy after login

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

诶，这就是我们想要的。

What is the key of vue
列表内有输入内容，后续操作破坏了原始顺序，如果以index作为key，就会产生错误DOM

3. key的实现原理

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

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

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

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