javascript - 为什么不总是使用索引作为 vue.js for 循环中的键？

Question

我已经在几个项目中使用了 vue.js，并且我一直在使用索引作为 for 循环中的键

<div v-for="(item, index) in items" :key="index"></div>

...并开始怀疑这是否存在问题，因为示例通常使用项目的 ID。

<div v-for="(item, index) in items" :key="item.ID"></div>

Answer 1

因为数组是可变的。如果将项目添加到数组或从数组中删除，任何给定项目的索引都可以而且将会更改。

您希望您的 key 是一个唯一值，仅标识您的唯一组件。您创建的主键总是比使用索引更好。

这是一个例子。

console.clear()

Vue.component("item", {
  props: ["value"],
  data() {
    return {
      internalValue: this.value
    }
  },
  template: `<li>Internal: {{internalValue}} Prop: {{value}}</li>`
})


new Vue({
  el: "#app",
  data: {
    items: [1, 2, 3, 4, 5]
  },
  methods: {
    addValue() {
      this.items.splice(this.items.length / 2, 0, this.items.length + 1)
    }
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  {{items}}
  <ul>
    <item v-for="i in items" :value="i" :key="i"></item>
  </ul>
  <button @click="addValue">AddValue</button>
  <ul>
    <item v-for="(i, index) in items" :value="i" :key="index"></item>
  </ul>
</div>

请注意，单击addValue 时，顶部的列表表示数组中真正 所在的新数字；在中间。在按钮下方的第二个列表中，值不表示数组中的实际位置，内部值和属性值不不一致。