Thinking about using key in Vue

#1 Use key in v-for

When using v-for to update the rendered element list, the in-place to reuse strategy is used by default; when Tabular Data is modified, it will determine whether a value is modified according to the key value, and if it is modified, it will re-render this item, otherwise to reuse the previous element;

Precautions for using key:

• Do not use key values that may be duplicated or may change (the Console will also give a reminder)
• If the data in the array has a state that needs to be maintained (such as a text box), do not use the index of the array as the key value, because if an element is inserted or removed from the array, the index of the subsequent element will change, which will make the vue The wrong binding state when to reuse in place.
• If there is no unique key value available in the array, and the array is not updated in full but uses a similar push, splice to insert or remove data, you can consider adding a key field to it, and the value is Symbol () to ensure uniqueness.

When to use which key?

This is a very sophisticated problem. First of all, you need to know the in-place to reuse in vue (probably when the virtual dom changes, the keys of the two virtual dom nodes will not recreate the node if they are the…