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

This article will explain in detail how vue uses key to optimize the v-for cycle. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Use key to optimize v-for loops

V-for is an instruction provided by Vue to render elements or template blocks multiple times based on source data. Because it is data-driven, when modifying list data, Vue will determine whether a value has been modified according to the key value, and it will re-render the modified value, otherwise the previous elements will be reused.

Here, if there is a unique representation of id in the data, it is recommended to use id as the key, and if not, you can use the array subscript index as the key. Because if you insert a value in the middle of the array, the subsequent index will change, and the Vue will be re-rendered even if the data remains the same, so the best way is to use the same and unique item in the array as the key value. For example:

{{item.data}} export default {data () {return {arr: [{id: 1, data:'a'}, {id: 2, data:'b'}, {id: 3, data:'c'} on how vue uses key to optimize the v-for cycle, that's it. Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.

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.