请求解析两种Vue.js v-for循环结构的差异

嘿，这是个非常实用的问题——很多Vue新手都会在key的选择上犯迷糊，咱们一步步拆解这两种写法的区别：

1. <li v-for="item in items" :key="item"> </li> #

这种写法把循环的每一项item本身作为key，它的适用场景和注意点：

• 仅当item是唯一且不可变的基础类型值（比如字符串、数字ID）时才靠谱。比如你的items是['苹果', '香蕉', '橙子']或者[101, 102, 103]，用item当key能让Vue精准识别每个元素的身份，数组增删排序时，Vue只会更新真正变化的DOM，性能更优。
• 踩坑预警：如果item是对象（比如[{id:1, name:'苹果'}, ...]），绝对不能直接用item当key！因为对象是引用类型，每次渲染时Vue会把新的对象引用当成新key，导致所有DOM重新渲染，完全失去了key优化性能的意义——这种情况应该用对象里的唯一标识，比如:key="item.id"。

2. <li v-for="(item, i) in items" :key="i"> </li> #

这种写法用循环的索引i作为key，它的局限性非常大：

• 仅适合完全静态的数组——也就是不会修改数组顺序、不会在中间/开头增删元素，只是单纯展示内容的场景。比如固定的下拉选项列表，永远不会变的那种。
• 致命坑点：如果数组有排序、插入、删除非末尾元素的操作，索引会跟着变化！比如原来数组是[a, b, c]，索引0、1、2，你在开头插入d变成[d, a, b, c]，此时原来的a对应索引1，b对应2...Vue会误以为“原来索引0的元素变成了d，索引1的元素变成了a”，从而复用原来的DOM节点。如果你的<li>里有用户输入（比如输入框）或者状态绑定，就会出现内容错位的诡异问题——比如原来a对应的输入框内容，现在跑到b的位置上了。

总结建议 #

优先选择唯一标识性的字段当key（比如item的ID、唯一字符串），只有在数组完全静态、无状态展示时，才考虑用索引当key——别图省事随便用索引，不然遇到数组操作时容易踩大坑！

内容的提问来源于stack exchange，提问作者bawina bawina