Preface:
When writing front-end code using the vue framework, the v-for method is often used, but when using this method, vue recommends that we add a unique identifier key. Why is this? After reading the articles of all the masters on the Internet and some of my own understandings, I have gained a new understanding of this issue. So, if you reader see any errors in the article, please correct them. Thank you guys.
1.diff algorithm
Modifying rendering of the real dom will cause the entire dom tree to be redrawn and rearranged. The diff algorithm can help us update only the parts we want to modify without causing redrawing and rearrangement of the entire dom tree. We first generate virtual DOM based on the dom. When the data of a dom node on the virtual Dom changes, a new Vnode will be generated. Compare the newly generated Vnode and oldVnode. If you find any modifications, you will directly render it to the real dom tree.
The diff algorithm compares the difference between new and old nodes while patching the real dom tree.
2. The function of key
I personally think that the function of key is to quickly find the old node corresponding to the new node. The key is the unique id for each vnode. You can rely on the key to get the corresponding vnode node in the oldVnode more accurately and faster. But the code can run without using the key, but it will report warning. Why?
3. Execution when key is not used
Example: Not using key an arrayarr=['1','2','3','4','5','6']。
<view v-for='arr'>
{{item}}
</view>
The above code will generate 6 divs in the arr corresponding to each div. Now we turn arr into [0, 1, 2, 3, 7, 8, 9]. When updating the rendering step, 1 in the original div becomes 0, 2 becomes 1, and so on, a new div content is 9. Vue will complete this change by changing the content of the original element and adding/decreasing elements. Because without the key attribute, Vue cannot track each node and can only complete the change in this way.
4. When using key
Example: numbers are [1, 2, 3, 7, 8, 9]
<div v-for="(num, index) in numbers" :key="index">
{{num}}
</div>
Become [0, 1, 2, 3, 7, 8, 9] Added one
The element, whose content is 0, and insert it before the element whose original content is 1. After having the key attribute, Vue will remember the order of the elements and insert/delete elements in the appropriate position according to this order to complete the update. This method is more efficient than the in-place multiplexing strategy without the key attribute. Overall, when using list rendering, the key attribute is always added, which can improve the efficiency of list rendering and improve the performance of the page.
Summarize
The above is what the editor introduces to you why you need the key attribute when using vue for. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!