v-for key的作用

key属性必须是唯一标识,并且给key赋值的属性必须是不可变的(number或string)

key作用:

提高渲染性能:若对数据进行：逆序添加、逆序删除等破坏顺序操作， 会产生没有必要的真实DOM更新，虽然界面效果没问题, 但效率低。

避免数据混乱结果出现:如果结构中还包含输入类的DOM： 会产生错误DOM更新 ，出现数据混乱。

 

 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

 

 

 把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没效率？

 

 

所以我们需要使用key来给每个节点做一个唯一的标识，Diff算法就可以正确地识别此节点，找到正确的位置区域插入新的节点
所以一句话，key的作用主要是为了高效地更新虚拟DOM，另外vue在使用相同标签名元素的过渡切换时，也会使用到key属性。其目的也是为了让vue可以区分他们，否则vue只会替换其内部属性而不会触发过渡效果。