先来给官方的回答,再讲讲我自己的理解,哈哈。
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一起交流前端,哈哈