1.源码中找答案:
src/core/vdom/patch.js --updateChilder()
简述:
向数组某个位置中插入一个元素
- 不使用key:
数据插入后,后面的不同的所有数据都要替换,最后还需要插入一次数据 - 使用key:
相比较,如果值相同,不做任何操作,只做一次插入操作
如果没有key,比较新老标签相同,标签会相同,则会判断为相同,就会替换强制更新
比较新老节点的方法
2.结论
- key的作用主要是为了高效的更新虚拟DOM,其原理是在vue在patch过程中通过key精准判断两个节点是否是同一个,从而避免频繁更新不同的元素,使得整个patch过程更加高效,减少dom操作量,提高性能
- 另外,若不设置key还可能在列表更新时引发一些隐藏的bug
- vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,否则vue只会替换其他内部属性而不会触发过渡效果