Detailed explanation of key uniqueness of v-for in Vue

1. DOM Diff

To truly understand the significance of the key attribute, we really have to start with DOM Diff. We do not need to have an in-depth understanding of the principles of DOM Diff, but only need to know the working process of DOM Diff.

Both Vue and React use virtual DOM to reduce unnecessary browser rendering. Since both Vue and React use the v = render( m ) method to render the view, when the model data changes, the view is updated by re-rendering the DOM elements. But sometimes we just change the data in a div in a component. If we use native rendering to update the view, the entire component must be updated. Isn't it a waste of time?

When we encounter such situations in our daily lives, we will not update all the pieces. It's like a puzzle is completed, and later one of the small pieces needs to be replaced. We just find the piece and replace it directly. We will never start over again. The developers of Vue and React think the same way, and try every possible way to optimize.

Our human eyes can see the difference between before and after the change at a glance, so we only need to update the differences. But the computer can't see it at a glance; it has to quickly compare them from the beginning until it finds the differences and updates them. The process of comparing the before and after changes to find the differences is called DOM Diff. The DOM in DOM Diff is a virtual DOM, that is, a JavaScript object. After comparing one by one to find the differences, the real DOM is partially updated.

During the comparison process, the virtual DOM will also form a virtual DOM tree. The working process of DOM Diff is to compare the object nodes on the two virtual DOM trees, specifically comparing the corresponding positions of each layer. Because the computer only compares the two virtual DOM elements at the corresponding positions of each layer, if only one node is inserted into a layer of the changed tree in the two trees, the structure of the tree remains unchanged, and DOM Diff will cause misaligned comparison when comparing this layer, as shown in the following figure:

Because the virtual DOM nodes at this level are completely the same for Vue and React except for the DOM nodes themselves, DOM Diff can only compare the corresponding positions one by one when comparing.

After one-to-one comparison, if the node type is the same, the node will be reused and only the different content in the node will be partially updated. As shown in the above figure, if this is the virtual DOM node of li under ul, then after comparing one by one and finding that the node types are the same, the previous node is reused and the content in the node is changed, that is, C is updated to F, D is updated to C, E is updated to D, and finally E is inserted.

The above is the case of inserting a node, and the consequence is a decrease in efficiency. However, if it is the case of deleting a node, the consequence is not just efficiency.

If you click a button to delete an li element, when comparing the new and old virtual DOM trees, they are still compared one by one according to the corresponding positions of each layer in the tree. For example, after deletion, [1,2,3] becomes [1,3]. It will compare the first li with the second li. If it finds that the element type has not changed, it will reuse the first li and then recursively compare the li inside. If it finds that there is no change, it will continue to reuse it. When comparing the second li elements, it is found that they are also li elements, so the previous li will be reused, and only 2 will be changed to 3.

At this time, if there are sub-elements in the reused li, and the data that the sub-elements depend on has not changed, the previous sub-components will continue to be reused, which will cause a misalignment, as shown in the following figure:

2. Add key attributes to elements of the same type at the same layer

In the above DOM Diff algorithm, only the corresponding positions of the same layer of the two trees are compared. There is no need to compare the elements between different layers. Moreover, when it is found in the DOM Diff process that the changed virtual DOM is of different type from the previous virtual DOM, the previous one will be uninstalled and the changed element node will be added again. Therefore, the above problem occurs when the node types at the same layer in the two trees are the same, and adding or deleting the layer will reduce efficiency or cause bugs.

This is what happens when we generate the same type of label elements in the v-for loop. If we don’t do something for the label node, there will be a bug risk. So what should we do?

The answer is to add a unique key value to the nodes of the same node type at the same layer. In this way, when DOM Diff performs a pairwise comparison, the two virtual DOMs with the same key will be compared instead of just comparing them according to the corresponding positions.

This will avoid misaligned comparisons, greatly improve comparison efficiency, and solve bug risks.

3. key cannot be an index subscript value

Because the index value of an array or object is unique, we often use the index as the value of the key attribute. Some people say that this is OK and will bring performance optimization or something, but using the index value will have a big bug risk.

These bugs occur when objects or items in your v-for loop are added, removed, or their order is changed.

So why can't we use index subscript?

In fact, it is because the index subscript is used and not used. Because when adding and deleting, the index of a specific element will change. For example, after [1,2,3] becomes [1,3], the original subscript corresponding to data 3 is 2, and after deletion, the subscript of data 3 becomes 1. When DOM Diff is performed, pairwise comparisons will be performed based on equal key values. The nodes corresponding to data 3 still do not correspond to each other. Therefore, using index as the key has the same effect as not setting the key.

This is why you should not use index as key.

Therefore: The key attribute value must be unique and will not change

The above is a detailed explanation of the key uniqueness of v-for in vue. For more information about the key uniqueness of v-for in vue, please pay attention to other related articles on 123WORDPRESS.COM!