为啥不总是在 vue.js for 循环中使用索引作为键？

Posted 2023-02-16

【中文标题】为啥不总是在 vue.js for 循环中使用索引作为键？

【英文标题】：Why not always use the index as the key in a vue.js for loop?为什么不总是在 vue.js for 循环中使用索引作为键？

【发布时间】：2022-01-12 04:38:22

【问题描述】：

我在几个项目中使用了 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>

【参考方案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 一致。

【讨论】：

@getsetbro 有一些方法可以缓解使用索引作为键时出现的问题，并且在某些情况下索引是您唯一的选择，但理想的情况是使用正确的键.

感谢您的示例。我从中学到的是 key 属性允许 Vue 正确跟踪项目在数组中的位置并相应地呈现。但是，我无法理解为什么在第二个列表中，internalValue 会与 value 不同，而 internalValue 只是分配了 this.value。关于这个主题，我有什么地方可以进一步阅读吗？

@AlexAlexson 组件中的data 函数仅在组件的生命周期内运行一次。该赋值是一个初始化值。当value 属性更改时，示例组件中没有任何内容会更新internalValue。

@Bert, AlexAlexson, 遵循Vue的内联补丁策略，对于第二个列表，由于应用程序状态和DOM之间没有正确的索引匹配，新的DOM元素将添加到末尾列表，它将初始化 internalValue = value（现在它等于 5）。所以你会看到它总是在列表末尾的 internalValue 值为 5。更多信息可以参考：deepsource.io/blog/key-attribute-vue-js

【参考方案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>

更清楚