vue中key的作用

先来给官方的回答，再讲讲我自己的理解，哈哈。

1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中 会执行patch vnode，patch vnode的过程中会执行updateChildren这个方法【patch.js中 重排算法】。 他会去更新两个新旧的子元素。在这个过程中。通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug【比如说有一行不应该更新的，但是更新了。】

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

比如说在data里面，你有一个数组数据：user:[A , B , C , D , E]，你先在索引值为2也就是C那里插入一个F，如果你没有给每一项设置key的话，Vue会更新A、B后的所有项，（这里就有点涉及到源码，因为没有设置key,所以他们的key都是undefined,然后A、B也没有改变啥，所以就不会更新A、B，）然后再插入E，如图：

 就是他会遍历(A、B)后每一项，然后更新(A、B)后每一项的内容，做了大量的dom操作。

如果使用key呢，那就直接如图：

Vue就可以直接通过可以key找到对应的dom节点，然后插入F，把后面的数据往后排，不会说更新(A、B)后每一项的内容，就减少的大量的dom操作。 

有兴趣的小伙伴可以加我微信Leyman233一起交流前端，哈哈