Vue— vue中key的作用

一. 问题

vue开发中，像v-for在使用时，需要加上:key，如果不加的话控制台会给出警报，所以这个key的作用是什么呢？

二. 作用

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

1. 在不使用key的时候 数据更新的时候 vue会遍历依次比较dom元素有没有改变，然后依次的替换或更新

2. 在使用了key的时候 数据更新的时候 vue会根据key的顺序记录每个元素 如果之前存在的某个key的元素更新后没有的话 就会直接被移除，新产生的key的元素也不会马上更新dom,而是再相同key的元素比较更新之后再更新到相应位置

例子：

比如一组数据ABCD，我们要更新成ABECD

那如果不适用key 就会依次比较dom元素 不同就会更新 所以更新操作会有三次

E→C, C→D 最后插入D

如果使用了key 当遍历到E的时候 发现原先不存在E的key 那么会先从后面进行比较 发现CD之前存在 最后只需要插入E就可以了

所以使用key比不适用key再数据更新时候的处理上对dom操作更少，也可以更快更高效的完成

三. 其他

当然除非遍历的dom内容非常简单，使不使用key的差异不大，但建议在使用v-for都加上key