“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

In vUE, index is not recommended as the key of the v-for loop array object. This fact is probably well known to beginners, but what is the reason and what are the consequences?

We will start with the differ algorithm of the virtual DOM today.

When we modify the data, the change triggers an update of the DOM object that subscribed to the change, a process that can be roughly divided into three stages:

  1. The preferred option is to rebuild the virtual DOM tree
  2. Then compare the nodes of the old and new virtual DOM trees, using the famous ones heredifferAlgorithms are also at the heart of what we’re going to talk about here
  3. Based on the comparison results, real DOM nodes are deleted, added, and updated. This is where the virtual DOM comes in.

Let’s illustrate this with a few use cases

Case 1:

We add a data item, list.unshift (‘test’), to the front of the array List that we want to iterate over.

What we want to do in the DOM is add a LI element to the top of the LI element in the DOM, with the innerHtml being test, without changing the original DOM Li.

What happens when we use index as the key?Remember that the li that we’re expanding at this point is the second, and innerHtml isindex: 1, item: 222; Then we click on the Add button to add an item first;

It is not difficult to notice that the contents of the second Li are updated, and the elements in the second Li have been moved to the third Li

Not only that, but when we click, we can see that except the first Li is new, all the other Li have been updated.

This is clearly against our wishes.

The root cause of this problem is the step in the virtual DOM comparison mentioned above:

Since we used index as the key of Li, the index changed with insert data during differ comparison. The original index of the second Li changed from 1 to 2, which would be considered as a dom change, so the update process was performed. This incurs unnecessary performance overhead, and we know that DOM updates can be particularly costly to browser performance, especially if the DOM in for is complex and nested in multiple layers.

So how do you avoid these problems? Index changes cause the above problems, so don’t use index as the key. Let’s test this hypothesis.

 <ul>
    <li v-for="(item, index) in list" :key="item">
      index: {{ index }}, item: {{ item }}
      <button @click="deleteItem(index)">delete</button>
    </li>
  </ul>

Copy the code

We use the item itself as the key to ensure that the item is not duplicated. We use list.unshift(“amingxiansen” + math.random ().toString(16).slice(2)); To ensure that newly added data does not duplicate. Let’s take a look at the effect:

Again, let’s expand the second DOM Li

Click on add

Then we find that a Li is added to the top, but the current expanded Li content does not change, indicating that the current Li and the subsequent Li have not been updated. I just inserted a li.

In the beginning of the demo, THERE was a small mistake: I wrote the index in the DOM Li and displayed it on the page. This will cause the content of the DOM Li to be updated regardless of whether my key changes. Note that elements without tags are also dom elements.

So, you see why index is not recommended as the key?