在虚拟DOM中,为什么不能用index取代key ?

参考:轻松理解为什么不用Index作为key

无论是vue还是react,其内部都是通过虚拟DOM机制来更新浏览器中真实的DOM。
以 ul > li *5 为例,从上至下点击每个li进行删除操作;diff算法将newVDom与oldVDom进行比较,找到key值相同的li标签,并进行自上而下的逐一对比。
原本我们每次点击只需要逐个删除列表中的第一个li节点,**若采用index作为key值,导致每次点击事件发生后,新产生的newVDOM中li的key被动态的赋值,导致对比错位,使得diff以为每个li都发生了改变,**所以每次删除一个li,页面都会重新渲染所有的列表项
若使得每个item 都有独特的key而不是下标,每点击一次,进入diff算法进行新旧VDOM的比较就会得出结果:仅仅是删除了一个节点,则由newVDOM映射到到真实DOM,只做了一个删除dom的操作,并没有重新渲染其他li,极大提升性能。

猜你喜欢

转载自blog.csdn.net/weixin_43912756/article/details/108288563