为什么不总是使用索引作为 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时，上面的列表表示数组中的新数字，其中确实在数组中；在中间。在按钮下方的第二个列表中，值 not 表示数组中的实际位置，内部和属性值表示 not同意

Answer 2

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>

更清楚

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

Why not always use the index as the key in a vue.js for loop?

javascript

indexing

key

vue.js

v-for