【VUE】Vue渲染列表为什么要加key
- 提升Vue渲染性能：帮助 Vue 跟踪每个节点的身份，进行高效的 DOM 操作；
- 如果不设置key值，则 Vue 无法准确地知道哪些元素是新增、删除或者移动的，只能重新渲染整个列表，导致性能下降；
- 只有通过为每个元素提供唯一的key值，才能在列表更新时尽量减少不必要的 DOM 操作和页面渲染。
在 Vue 中，当渲染列表时我们通常使用 v-for 指令，它可以将一个数据集合渲染为一个列表。
在遍历渲染列表时，Vue 会尽可能地复用已经存在的元素来降低 DOM 操作的次数，这样可以提高性能。
当我们对数据集合进行增删操作时，Vue 会根据数组索引进行 diff 算法比对，从而计算出需要增加、删除和移动的元素。
这时如果每个元素没有提供一个唯一的 key 值，Vue 就无法准确地知道该如何操作 DOM，只能使用一些不太合理的方式处理这些情况，导致重新渲染 DOM，进而影响页面性能。
因此，在使用 v-for 渲染列表时，为每个元素设定一个唯一的 key 值可以帮助 Vue 更好地跟踪每个节点的身份，从而高效地更新虚拟 DOM 和真实 DOM，并最终提升应用的性能。
例如：
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
在上述代码中，v-for 循环渲染了一个数据集合 items，对于每个元素，我们都指定了一个唯一的 key 值，这样 Vue 就能够在重新渲染列表时更好地跟踪每个元素的身份，从而提高渲染性能和效率。