vue v-for中key的作用和原理

要点：

 

面试易问：

 

1.在vue中写了key怎么处理不写又怎么处理

2.在vue中写了key的话用index好还是用id比较好

key的作用就是给节点进行身份标识相当于每个人的身份证号

我们这边用index来作为key

在这种情况下会有问题 

在数组的最前面添加一个数据

增加方法

methods:{

        add(){

               const p={id=“004“,name="老刘”,age:18}

                this.persons.unshift(p)

        }

}

而且在vue进行页面渲染时,它把key给征用了,最后生成显示的demo元素时,把它给去掉了

验证：

把key换成a

 

 

 

问题出现 当在后面写一个text框

理想效果为下图所示

但结果却是

 如果用p.id作为key时不出问题

 

 

 

三、如果不写的话

也出现和index相同的情况

 

要说清这个原因

1.key的工作原理

2.虚拟dmo的对比算法（diff算法）

比较旧的的虚拟dom和新的dom因为:key="index" 所以当在最前面添加一个数据时,key的值如图所示,然后key的值相同的进行新旧对比,先进行“张三”和“老刘”的对比不一样,然后进行input的对比一样

因为这边是进行虚拟dmo的对比而,text输入的内容是在真实的dmo的无法比较输入的不同。

当比较不一样时,会对新的虚拟dmo不一样的进行真实dmo的生成不会直接复用之前的真实dmo中的

当比较相同时,就把之前真实dmo中有的进行复用添加进,新的dmo中

 

 所以:key="index" 时，如果数据顺序被破坏则不要用index容易出现效率降低,和数据错乱

用id时：

 

不写key时,vue会自己给你补上key为index