vue源码：vue中key的作用和工作原理

结论&＃xff1a;
1、key的作用主要是为了高效的更新虚拟DOM&＃xff0c;其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个&＃xff0c;从而避免频繁更新不同元素&＃xff0c;使得整个patch过程更加高效&＃xff0c;减少DOM操作量&＃xff0c;提高性能。
2、另外&＃xff0c;若不设置key还可能在列表更新时引发一些隐藏的bug
3、vue中在使用相同标签名元素的过度切换时&＃xff0c;也会使用到key属性&＃xff0c;其目的也是为了让vue可以区分它们&＃xff0c;否则vue只会替换其内部属性不会触发过渡效果

一、vue的updateChildren方法

走到判断虚拟dom节点的老开头、新开头是否为同一个节点的sameVnode方法

没有key的情况&＃xff0c;会判定为同一个节点&＃xff0c;snapdom算法patch vnode的时候&＃xff0c;新旧vnode对比的时候都会从开头做比较&＃xff0c;而不会从结尾去做比较&＃xff0c;导致多次dom节点更新