为什么设置key值
Vue是不直接操作DOM的,是通过js的Object对象来模拟DOM中的节点,比较虚拟DOM是用的diff的算法。
diff算法的图:
总体意思来说:只会同级比较,不会跨级比较。
举例:
如上图:在同级A,B,C,D四个节点中,在B和C之间插入E,没有key的时候:C更新成了E,D更新成了C,最后插入D,这样效率很低。
加上key之后,就能准确的找到节点的位置:发现ABCD都没变化,直接插入E就可以了。
所以key的作用主要是为了高效的更新虚拟DOM
为什么不能用index作为key
例如一组数:
list:[
{
id: 1,
name: 'a',
//index: 0
},
{
id: 2,
name: 'b',
//index: 1
},
{
id: 3,
name: 'c',
//index: 2
},
{
id: 4,
name: 'd',
//index: 3
},
]
这样的页面显示的是:a,b,c,d(默认选中c)
如果key绑定的是index:
删掉index=1的第二组数(b),除了b之外,c和d的index变化了(c变为1了,d的变为2了),所以c和d也都要重新渲染一遍,影响了性能。
刚开始默认选中c(index原来为2),删除b后,d的index变为2了,这时候页面上默认就选中d了,这就产生了bug。