从v-for的key说起

一、v-for中的key是为什么存在呢？

这是vue官网给key的定义，key主要用于vue的虚拟dom算法。新的问题出现了，vue的虚拟dom算法是什么？

二、虚拟domg算法

我们的程序在运行时，状态会不断发生变化。每当状态发生变化时，都需要重新渲染真实dom，但渲染真实DOM是非常耗费性能的

 

所以出现了虚拟DOM，虚拟DOM是通过状态生成一个虚拟节点树，然后使用虚拟节点树去渲染真实DOM

在重新渲染之前，会使用新生成的虚拟节点树和旧的虚拟节点树进行对比，只渲染不同的部分，这就是diff算法

 

diff算法做比较时，主要靠比较虚拟dom树节点的类型和key，判断是否是同一节点，是同一节点就更新属性，否则就丢弃旧节点，然后新增

 

三、经典问题，为什么不推荐使用index做v-for的key？

 

1.假设我们用 [1,2,3,4,5] 渲染了5个div节点，index做key。

现在要在 1,2 两个div中间新增一个x节点，那么实际更新时是 2,3,4,5更新为x,2,3,4  同时新增了一个节点5，是不是很浪费性能

 

2.用index做key可能会有bug

所以尽量不要使用index做key。

以上。