1. The function of adding key

when Vue.js is updating the list of rendered elements with v-for, it defaults to the "reuse in place" policy. If the order of the data items is changed, Vue will not move the DOM elements to match the order of the data items, but simply reuse each element here and ensure that it displays each element that has been rendered under a specific index. This track-by= "$index" similar to Vue 1.x

introduce the answer of Vue's official website, which roughly means that for dom nodes that have been rendered, when the data part of the source list changes, you don't have to re-render the dom, only to re-render the part of the data changes.

2. Does key have an optimized effect when rendering the list for the first time?
has no optimized effect.

3. When does key produce the optimization effect?
key is when the source data changes. If you have key, you can track which item or items of data have changed, and you can only update the dom corresponding to the changed data. If your key is not unique, it will be difficult for vue to track exactly what the changed data is, which is the only reason why key must be.

in addition, it is best not to use list-rendered index as key, because when the location of the source data changes, for example, the data of the first item is moved to the second item, but your key remains the same. In order to update the view, vue must re-render the whole dom, which means that it consumes a lot of performance in vain. So it makes no sense to use index as a key.

the role of key

1. key helps determine which item in list has been changed, added, or deleted.
2. it is convenient to compare which item has changed between the new and old DOM after dom changes, and speed up virtual dom rendering and performance improvement

to put it simply, the key value is used when the browser DOM renders for the first time.
this means that the data you loop is rendered to the page for the first time, and the data is bound to DOM.

Let's say that the data you manipulate at this time changes the location of the data, just at this time if you use the subscript as the key value. There will be overlap of key values, and you will find that the value you get will be different from the value on the bound dom.

solution, with a unique value. For example, the id returned to you by the backend

this is also what I understand. If it's not right, I hope the gods will point out that they can learn from each other