结论: 1、key的作用主要是为了高效的更新虚拟DOM,其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁更新不同元素,使得整个patch过程更加高效,减少DOM操作量,提高性能。 2、另外,若不设置key还可能在列表更新时引发一些隐藏的bug 3、vue中在使用相同标签名元素的过度切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其内部属性不会触发过渡效果
一、vue的updateChildren方法
走到判断虚拟dom节点的老开头、新开头是否为同一个节点的sameVnode方法
没有key的情况,会判定为同一个节点,snapdom算法patch vnode的时候,新旧vnode对比的时候都会从开头做比较,而不会从结尾去做比较,导致多次dom节点更新