Shulou(Shulou.com)06/01 Report--

This article mainly shows you the "list in vue how to use a unique key", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "list in vue how to use unique key" this article.

List uses a unique key

For example, if we have a list and we need to insert an element in the middle, what happens if we don't use key or use index as the key? Look at a picture first.

The li1 and li2 shown in the figure will not be re-rendered, which is not controversial. Li3, li4 and li5 will all be re-rendered.

Because when you do not use key or the index of the list as the key, the corresponding position relationship of each element is index, and the result in the above figure directly causes the inserted elements to be changed to all the subsequent elements, so they will all be updated and re-rendered during the patch process.

This is not what we want, what we want is the element added by rendering, and the other four elements will not be re-rendered without any changes.

In the case of using a unique key, the corresponding position relationship of each element is key. Let's take a look at the case where a unique key value is used.

In this way, the li3 and li4 in the figure will not be re-rendered, because the content of the element has not changed and the corresponding position relationship has not changed.

This is why v-for must write key, and it is not recommended to use array index as key in development.

The above is all the content of the article "list how to use unique key in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.