浅谈vue或者react中的key的作用

1、每次面试基本都会问到一个问题，即是key是干什么的？
在之前，使用key的时候，都是直接使用，对具体的底层了解确是懵懂的，
几次被问及这个问题，因此后来变去了解了一下

2、在vue和react的使用中，我们经常在循环一个列表的时候，控制台会给警告提示，说你未使用key，或者是key相同，可能造成渲染错误

这个时候你可能就会纳闷，这个key到底干啥的？？？

key是虚拟dom节点的唯一标识，在页面数据更新后，vue或者react会立即创建新的虚拟dom树，而这个时候，如果将整个虚拟dom树通过render方法渲染为真实dom，就太消耗性能了。

因此vue和react都采用diff的算法，把新旧虚拟dom树从上到下的，从外到里的递归比较，而在比较的时候，key是第一权重的。

通过比较发现key键相同，且虚拟dom里层内容都是一样的，那么当前的虚拟dom对应在页面的真实dom不会发生变化，不会重新渲染

如果key相同，虚拟dom的内部继续比较，如果发生了变化，就会销毁旧的的dom节点，从新渲染新的dom

3、使用key键为什么不建议使用index的值？
其实原因很简单，就是用index的时候，如果数组的元素顺序发生了变化，
比如在数组前面添加元素，增删改查等操作，新旧虚拟dom比较的时候，就会发现key键相同，但是内容不一致
那么对应的虚拟dom都要从新渲染，如果数据量大的时候，就销毁，创建的节点就会很多，消耗性能和时间