Vue（十五）v-for渲染时key的作用

总结

1、虚拟DOM中key的作用（key存在于虚拟DOM不会在真实DOM中）

key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，规则如下

（1）旧虚拟DOM中找到了与新虚拟DOM相同的key

①若虚拟DOM中内容没有变化，直接使用之前的真实DOM

②若虚拟DOM中内容变了，则生成的新的DOM随后替换掉之前页面的真实DOM

（2）旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM随后渲染到页面

2、用index作为key可能会引发的问题

（1）若对数据进行逆序操作（破坏顺序）且结构中不包含输入类（input框等）的DOM，则会产生没有必要的真实DOM更新，界面效果一般不会有问题但是效率较低

（2）如果结构中包含输入类的DOM，会产生错误DOM更新，界面有问题

3、开发中如何选择key

(1)、最好选择每条数据的唯一标识作为key,如ID、学号等

(2)、如果不存在对数据的逆序操作，仅适用于渲染列表展示，适用index做为key是没有问题的

案例（点击按钮在原来数组中的第一个位置添加老刘）

一、index作为key值，逆序添加（页面错乱）

1.、代码

2、页面中在input框中输入内容

3、点击添加按钮

二、每个人的id作为key值逆序添加（页面正常渲染）

代码

页面结果

原理

index作为key值

 id作为key值

.