Vue 列表 key 为什么不能用 index 索引？通俗原理讲解

使用 v-for 循环渲染列表时官方强制要求绑定唯一 key 值很多图省事直接绑定数组下标 index这是典型的不规范写法在列表删除、插入、排序操作时会引发 DOM 错乱、表单输入框数据错位等隐形 bug。Vue 底层通过 diff 算法对比新旧虚拟 DOMkey 作为节点唯一标识用来精准判断节点是新增、删除还是复用。如果 key 使用 index数组顺序发生变化后index 会跟随元素重新分配diff 会认为前后 key 完全不同不会复用原有 DOM 节点而是全部销毁重新创建页面渲染性能大幅下降。举个简单例子htmlliv-for(item,index) in list:keyindex{{item.name}}/li删除数组第一条数据原本第二条数据下标变为 0key 同步变成 0diff 会错误复用第一条 DOM 结构导致绑定的数据与视图错位。正确规范是使用后端返回的业务唯一主键 id 作为 keyid 具备永久唯一性无论列表顺序如何变动每个元素 key 固定不变diff 算法可以精准复用 DOM 节点既优化渲染性能又从根本避免列表操作带来的数据错乱问题。哪怕是测试演示项目也建议养成不使用 index 作为 key 的编码习惯规避后续迭代中难以排查的隐性前端 bug。