Detailed explanation of the role and principle of key in Vue

1. Let’s start with the conclusion
2. The role of key

2.1 An example
2.2 Modify the above example
2.3 Modify the example again

3. Implementation principle of key

1. When the key is index.
2. When key is id.

Summarize

1. Let’s start with the conclusion

Key in Vue is the identifier of the DOM object;
When displaying a list, the default key is index;
If the data is only used for display, there is no problem 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, it will render an incorrect DOM.

As for the role and implementation principle of key, let’s talk about it one by one.

2. The role of key

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

2.1 An example

Displays a group of personnel information in a list format.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The principle of key</title>

    <!--Introduce vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    
</head>
<div id="root">
    <h2>Staff List</h2>
    <ul>
        <li v-for="(p,index) in persons">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
</div>
<body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                persons:
                    {'id':'001', 'name':'张三', 'age':'18'},
                    {'id':'002', 'name':'Li Si', 'age':'19'},
                    {'id':'003', 'name':'Wang Wu', 'age':'20'}
                ]
            }
        })
    </script>
</body>
</html>

This html file opens in the browser as shown below.

The above sample HTML file does not use key, and there seems to be no problem. Of course, there will be no problem if you simply display the data without writing the key.

Now let's add a key to the above example. Here, the id of each data is used as the key.

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
</li>

The display result after adding the key is exactly the same as the result in the above picture.

If we view the element in a browser, we won't see the key.

So far, we can draw two conclusions: 1. It is only used for data display, and not writing the key will have no effect; 2. The key will not appear in the real DOM

In fact, even if you don't write a key, Vue also uses the key when generating the real DOM. The default is the data index (index)

We replace key with index, and the displayed data will not change.

<li v-for="(p,index) in persons" :key="index">
	{{p.name}}-{{p.age}}
</li>

2.2 Modify the above example

Display the index based on the personnel information and add a button to add the personnel information to the header

Slightly modify the above html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The principle of key</title>

    <!--Introduce vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="icon" href="../favicon.ico" type="image/x-icon" />

</head>
<div id="root">
    <h2>Staff List</h2>
    <button @click="add">Add a Lao Liu</button>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}-{{index}}
        </li>
    </ul>
</div>
<body>
    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                persons:
                    {'id':'001', 'name':'张三', 'age':'18'},
                    {'id':'002', 'name':'Li Si', 'age':'19'},
                    {'id':'003', 'name':'Wang Wu', 'age':'20'}
                ]
            },
            methods:{
                add(){
                    const p = {'id':'004', 'name':'老刘', 'age':'40'}
                    this.persons.unshift(p)
                }
            }
        })
    </script>
</body>
</html>

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

Click the button to add a new character. The index changes at this time. The newly added character "Lao Liu" becomes index 0. It seems right, but also wrong.

Of course, there is nothing wrong with simply discussing indexes. Let's take a new example to explain what is wrong.

2.3 Modify the example again

Instead of displaying the index, display an input box. Write the last name of each person in the input box behind them and observe the changes in the original data after the new data is inserted.

Modify the html slightly

<li v-for="(p,index) in persons" :key="index">
    {{p.name}}-{{p.age}}
    <input type="text">
</li>

The actual effect is as shown below

At this point, nothing seems to be wrong. Next is the moment to witness a miracle.

When we added Lao Liu, something went wrong, which was different from what we expected.

This is the case when the key is an index. If it is changed to a unique identifier for the data, such a problem will not occur.

<li v-for="(p,index) in persons" :key="p.id">
    {{p.name}}-{{p.age}}
    <input type="text">
</li>

Hey, this is what we want.

If there is input in the list, subsequent operations will destroy the original order, resulting in an error DOM

3. Implementation principle of key

To explain the implementation principle of key, we need to introduce a very important concept of Vue - [Virtual DOM].

Given a set of data, Vue needs to render this data on the page. First, it needs to generate a [virtual DOM], and then generate a [real DOM] based on the [virtual DOM]. If the data changes, Vue will generate a [new virtual DOM]. Note that this [new virtual DOM] does not directly generate a [new real DOM], otherwise the virtual DOM will be useless. What Vue does is to compare the [new virtual DOM] generated based on the new data with the previous [real DOM]. If they are the same, they can be used directly ("take it as it is"); if they are different, a new DOM object is generated.

In this process, key plays a very important role.

Let's analyze it based on the last example.

1. When the key is index.

The process of generating [real DOM] based on data is as follows: (Note that the content in the input box in the real DOM in the figure below is manually added after the page is generated)

insert image description here

Then, add the character "Lao Liu" and get a new set of data

insert image description here

Vue takes new data to generate [new virtual DOM]

insert image description here

When generating the real DOM, you need to compare the newly generated virtual DOM with the original real DOM (analyze one by one)

insert image description here

Compared with the first one, the key is 0, and the data with key 0 in the old DOM is found. It is found that "Lao Liu-40" and "Zhang San-18" are different, and the new data "Lao Liu-40" is rendered to the page; later, it is found that it is the same input box, so there is no need to re-render, and the content of the original real DOM can be used directly. The first piece of content appears, and this input box also contains Zhang San’s last name.

insert image description here

Compared with the second one, the key is 1, and the data with key 1 in the old DOM is found. It is found that "Zhang San-18" and "Li Si-19" are different, and the new data "Zhang San-18" is rendered to the page; later, it is found that it is the same input box, so there is no need to re-render, and the content of the original real DOM can be used directly. The second piece of content appeared, and this input box also contained Li Si's last name.

insert image description here

The same applies afterwards.

Looking back at this process, the key is the unique identifier of the object in the virtual DOM, which identifies the "identity information" of the data. Vue will compare the content in the virtual DOM based on this "identity identifier". The original intention of the design is to save resource expenses and avoid rendering duplicate parts. In this example, not only does it cause efficiency problems, but it also renders an incorrect DOM, which has very serious consequences.

2. When key is id.

Directly enter the comparison of the old and new DOM after adding "Lao Liu".

insert image description here

Compared with the first one, the key is '004', which is found not to exist in the old DOM, so "老刘-40" and a new input box are directly generated.

Comparing with the second one, the key is '001', it is found that the data with the key '001' in the old DOM is the same, so "Zhang San-18" and the input box are directly used.

…

Finally, the correct DOM is generated, saving resource expenses.

Summarize

It is recommended to use the unique identifier of the data as the key, such as ID, ID number, mobile phone number, etc. Usually this data is provided by the backend.

If subsequent operations do not destroy the original data order, there is no problem in using the index as the key.

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of what role key plays in Vue list rendering
A brief discussion on the role and working principle of key in Vue3
Detailed explanation of the principle and function of Vue list rendering key

<<: HTML markup language - reference

>>: Using cursor loop to read temporary table in Mysql stored procedure

Essential bonus items for optimizing and packaging the front end of Vue projects

Recommend

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

example: <html> <head> <style type...

5 ways to quickly remove the blank space of Inline-Block in HTML

The inline-block property value becomes very usef...

mysql determines whether the current time is between the start and end time and the start and end time are allowed to be empty

Table of contents Requirement: Query ongoing acti...

Detailed explanation of the role and principle of key in Vue

Table of contents

1. Let’s start with the conclusion

2. The role of key

2.1 An example

2.2 Modify the above example

2.3 Modify the example again

3. Implementation principle of key

1. When the key is index.

2. When key is id.

Summarize

Essential bonus items for optimizing and packaging the front end of Vue projects

Ubuntu installs scrcpy to complete mobile phone screen projection and control (another way to use QQ WeChat in Ubuntu)

Tomcat uses Log4j to output catalina.out log

MySQL 5.7.17 winx64 free installation version configuration method graphic tutorial

Two ways to build Docker images

61 Things Every Web Developer Should Know

Detailed use of Echarts in vue2 vue3

Detailed explanation of how to use awk in Linux

Detailed explanation of Nginx Location configuration (Location matching order)

Implementation of MySQL index-based stress testing

Recommend

Implementation of the list-style-type attribute in front of CSS ordered or unordered lists

5 ways to quickly remove the blank space of Inline-Block in HTML

mysql determines whether the current time is between the start and end time and the start and end time are allowed to be empty

An example of vertical centering of sub-elements in div using Flex layout

Elements of user experience or elements of web design

How to use CSS to achieve data hotspot effect

Modify the jvm encoding problem when Tomcat is running

Detailed explanation of how to use Tomcat Native to improve Tomcat IO efficiency

Detailed explanation of various join summaries of SQL

Markodwn's detailed explanation of the idea of synchronous scrolling with title alignment

In-depth analysis of Linux NFS mechanism through cases

Talk about nextTick in Vue

How to use CURRENT_TIMESTAMP in MySQL

Detailed explanation of the mechanism and implementation of accept lock in Nginx

Share 20 excellent web form design cases