The function of key
Both Vue and React implement a virtual DOM that lets you re-render pages by manipulating data rather than DOM elements directly.
- Update virtual DON efficiently
- By default, the in-place reuse strategy is used. When the list data is modified, it will judge whether a value is changed according to the key value. If the value is changed, it will re-render the item, otherwise the previous element will be reused
Without keys, all data needs to be re-rendered when the list is updated
With key, new elements are inserted in place to complete the update
Why can’t index be used as key in v-for
- Performance issues occur when DOM updates are made
- Some status bugs occur
- If there is data deletion, index changes will result in data confusion