Detailed explanation of the principle and function of Vue list rendering key

The principle and function of list rendering key

The key is used to identify the node. If the key is bound to the value of the index, problems may easily occur:

1. If the data is added or deleted in reverse order, unnecessary real DOM updates will occur. The page effect is fine, but the efficiency is 2 problems.

2. If the deconstruction also includes the DOM of the input class, an incorrect DOM update will occur - there is a problem with the interface

Case analysis of the problem:

Click the button to add an object to the front of the list

    <div id="root">
        <button @click.once="add">Add a Lao Liu</button>
        <ul>
            <li v-for="(p, index) in persons" :key="index">
                {{p.name}}---{{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>

        var vm = new Vue({
            el:"#root",
            data:{
                persons:
                    {id:"001", name:"张三", age:15},
                    {id:"002", name:"Li Si", age:16},
                    {id:"003", name:"王五", age:17}
                ]
            },
            methods: {
                add(){
                    const p = {id:"004", name:"老刘", age:20}
                    this.persons.unshift(p)
                }
            },
        })

This is the effect shown

When we fill in the name in the input box

Then click the button and observe the problem

We will find that Lao Liu appears at the top of the form, but the content in the list is not equal to the content in the input box.

Solution: We key="index"改為:key="id"

Analysis of the key principle

Initial data

Get the initial data and generate a virtual DOM based on the initial data. Convert the virtual DOM to a real DOM

New data

Get the new data (including Lao Liu) and generate a virtual DOM based on the data. Compare the virtual DOM with the virtual DOM of the initial data (the text information in li is different, but the input is the same. The virtual DOM has no data. The content entered on the page is stored in the real DOM) Text information - the new data replaces the initial data, and the input content is retained

The role of key

Summarize

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!