详解vue中v-for的key唯一性

当使用 Vue 的 v-for 指令循环渲染数据时，每个渲染的元素都需要拥有唯一的 key 属性。

为什么需要 key 属性？

key 属性的作用是为了帮助 Vue 识别每个节点的标识，以便高效的更新虚拟 DOM。

假如我们有如下代码：

<template>
  <div>
    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['a', 'b', 'c']
    }
  }
}
</script>

在这个例子中，我们循环遍历一个数组 list 来渲染 li ，但并没有给 li 设置 key 属性。这意味着当 list 数组发生变化时，Vue 无法有效地判断哪个 li 元素发生了变化，于是只好重新渲染整个列表。

所以，为了更好的性能和优化，我们需要给 li 元素设置一个独特的 key 属性值。

如何保证 key 属性的唯一性？

通常情况下，key 属性都会使用数据的唯一标识作为其属性值。例如，当我们循环遍历一个包含多个用户信息对象的数组时，可以使用每个用户的 id 作为其唯一标识。这样保证了 key 属性值的唯一性，也让 Vue 能够快速地判断出哪个元素发生了变化并进行局部更新。

以下是两个示例说明：

1. 在使用 v-for 遍历一个对象数组时，我们可以使用 item.id 作为 key 属性值，如下所示：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' }
      ]
    }
  }
}
</script>

1. 在使用 v-for 遍历一个数字数组时，我们可以使用索引值作为 key 属性值，如下所示：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  }
}
</script>

值得注意的是，在任何时候都不应该使用随机数或时间戳作为 key 属性值，因为这样会导致 Vue 的更新机制失效，从而造成一定的性能问题。

综上所述，为了保证 v-for 的性能和正确性，在循环遍历数据并渲染元素的时候一定要添加唯一的 key 属性。