03-key的作用与原理

1.源码中找答案：

src/core/vdom/patch.js --updateChilder()

简述：
向数组某个位置中插入一个元素

1. 不使用key：
   数据插入后，后面的不同的所有数据都要替换，最后还需要插入一次数据
2. 使用key:
   相比较，如果值相同，不做任何操作，只做一次插入操作

如果没有key，比较新老标签相同，标签会相同，则会判断为相同，就会替换强制更新

比较新老节点的方法

2.结论

1. key的作用主要是为了高效的更新虚拟DOM,其原理是在vue在patch过程中通过key精准判断两个节点是否是同一个，从而避免频繁更新不同的元素，使得整个patch过程更加高效，减少dom操作量，提高性能

2. 另外，若不设置key还可能在列表更新时引发一些隐藏的bug

3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其他内部属性而不会触发过渡效果