谈谈vue为什么不能用index做为唯一标识_<el-option v-for="(dict,index) index 不是唯一-优快云博客

本文链接：https://blog.youkuaiyun.com/Android062005/article/details/128144014

博客讨论了在Vue中为何不能使用index作为唯一标识的原因，涉及到虚拟DOM的概念和diff算法的工作原理。文章指出，虚拟DOM通过减少DOM操作提高性能，而key用于辅助diff算法准确识别变化的节点。使用index作为key在数据删除时会导致不必要的渲染，影响性能。文章还提供了一个点击事件和删除操作的例子来说明问题所在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue为什么不能用index作为唯一标识？这涉及到原生js的DOM操作，以及虚拟DOM带来的优化，下面分为2个部分来谈

虚拟DOM
为什么不能用index作为key

1.虚拟DOM

先来看看原生操作dom节点的方式，但是浏览器响应DOM操作是非常耗能的，因为节点的改变会导致浏览器进行重排重绘操作（可参考浏览器渲染页面的过程）

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>

<body><div id="app"><ul></ul></div><script> let ul = document.querySelector('ul')for (let i = 0; i < 3; i++) {let li = document.createElement('li')li.innerHTML = i + 1ul.appendChild(li)} </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><title>Document</title>
</head>

<body><div id="app"><ul><item v-for="(num, index) in list" :key="index" :num="num" :class="`item${num}`"></item></ul><button @click="change">change</button></div><script> new Vue({el: '#app',data() {return {list: [1, 2, 3]}},methods: {change() {this.list.reverse()}},components: {item: {props: ['num'],template: `<div>{{num}}</div>`,name: 'child'}}}) </script>
</body>

</html>

当点击change按钮后

如果原生js进行这样的操作，势必会进行重排，但是页面只是局部改变，但vue引入虚拟dom之后大大节省了耗能

那什么是虚拟DOM？

在vue中，执行渲染函数前就可以得到一个虚拟节点树，使用虚拟节点树就可以渲染页面。当页面dom节点动态改变时，在渲染之前，会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比，只渲染不同的部分，各个虚拟节点就是一个对象，描述了一层容器的特征，下面是vue代码中点击前change按钮前的虚拟节点树

vndoe = {tag: 'ul',children: [{ tag: 'li',key:0, children: [{ vnode: { text: '3' } }] },{ tag: 'li',key:1, children: [{ vnode: { text: '2' } }] },{ tag: 'li',key:2, children: [{ vnode: { text: '1' } }] }]
}

当点击change之后会生成新的虚拟节点树和它对比

对比过后，仅仅渲染不同的地方

那怎样去找到2个虚拟节点数的不同之处呢？这就涉及到了vue源码的diff算法

key就是唯一标识为了让diff算法更准确找到需要对比的两个节点

2.那为什么不能用index作为key

我们还是用先前的代码来看，在diff算法中，key就是唯一标识，当2个虚拟节点树进行对比时，会找到相同的key值进行对比，发现key值相同但里面的数据不同，diff算法就会认定它改变了将它重新渲染，而事实上，他们只是位置变了，当我们给它加上唯一标识id时

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><title>Document</title>
</head>

<body><div id="app"><ul><item v-for="(num, index) in list" :key="num.id" :num="num.n" :class="`item${num.n}`"></item></ul><button @click="change">change</button></div><script> new Vue({el: '#app',data() {return {list: [{n: 1,id: 0}, {n: 2,id: 1}, {n: 3,id: 2}, ]}},methods: {change() {this.list.reverse()}},components: {item: {props: ['num'],template: `<div>{{num}}</div>`,name: 'child'}}}) </script>
</body>

</html>

点击change后的虚拟节点树对比

在删除数据index作为key的坏处更明显了

<!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><title>Document</title>
</head>

<body><div id="app"><ul><li v-for="(num, index) in list" :key="index"><item/></li></ul><button @click="del">del</button></div><script> new Vue({el: '#app',data() {return {list: [1, 2, 3]}},methods: {del() {this.list.splice(0, 1)}},components: {item: {template: '<div>{{Math.random()}}</div>'}}}) </script>
</body>

</html>