在 Vue 中为什么不建议用index做key，为什么不建议用随机数做key？
在Vue中，key是一种非常重要的特性，用于优化组件更新和渲染的性能。然而，Vue的开发者们极力强调了一个重要的问题，那就是不要使用index或者随机数作为key属性。那这些实际上是什么原因呢？
从理论上来说，每个v-for中的元素都需要一个key，以便Vue可以跟踪每个元素的身份。这个key必须是唯一的，因为它确定了每个元素在整个列表中的身份。然而，在实践中，使用index作为key会导致一系列问题。
举个例子，当你在列表中添加或删除元素时，index会随着位置的变化而发生改变。这样，当你在某个位置添加一个元素时，由于index改变了，Vue会重新渲染整个列表，而不是仅渲染新插入的元素。这将导致性能问题和不必要的开销。
类似地，当你尝试使用随机数作为key时，会产生相似的问题。即使你可以通过创建一个随机数的函数来确保随机数的唯一性，但这种方法的问题在于，每次渲染可能都会生成不同的key，这样Vue就必须重新渲染整个列表。
相反，应该使用唯一且不会改变的值作为key。比如，如果你是从一个API中获取数据，那么可以使用每条数据的ID作为key。这样，当你在列表中添加或删除元素时，仅会重新渲染受影响的元素，因为ID不会随位置的改变而改变。
示例：
假设你有一个列表，其中包含以下数据：
data: [
{id: 1, name: 'Alice'},
{id: 2, name: 'Bob'},
{id: 3, name: 'Charlie'}
]
通常你在模板中使用v-for指令来渲染这个列表：
<ul>
<li v-for="(item, index) in data" :key="index">
{{ item.name }}
</li>
</ul>
这将导致index作为key的问题，因为每个li元素的key属性都是它们在列表中的索引。这使得Vue很难识别列表中何时发生变化，并且在插入或删除元素时可能会导致不必要的重新渲染。
相反，如果使用每个元素的ID作为key，则可以在列表发生变化时更好地跟踪每个元素的身份：
<ul>
<li v-for="item in data" :key="item.id">
{{ item.name }}
</li>
</ul>
这样，当你添加或删除一个元素时，Vue只会重新渲染受影响的元素，并且不会重新渲染整个列表。
因此，在Vue中，你应该避免使用index和随机数作为key。相反，使用具有唯一性和不变性的值作为key，以便Vue可以更好地优化组件的更新和渲染性能。
