为什么不总是在 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

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: [{name:'a'},{name:'b'},{name:'c'}]
  },
  methods: {
    addValue() {
      this.items = [{name:'a'},{name:6},{name:'b'},{name:'c'}];
    }
  }
})

<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.name" :key="i"></item>
  </ul>
  <button @click="addValue">AddValue</button>
  <ul>
    <item v-for="(i, index) in items" :value="i.name" :key="index"></item>
  </ul>
</div>

更清楚

Answer 2

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

您希望您的 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被点击时，最上面的列表代表数组中真正在数组中的新数字；在中间。在按钮下方的第二个列表中，值 not 表示数组中的实际位置，内部值和属性值 not 一致。