Angular,Vue,React都使用了虚拟DOM技术，数据会先更新到虚拟DOM，然后将虚拟DOM与真实DOM进行比较（粒度是标签级），当虚拟DOM与真实DOM一致的时候，就不会更新真实DOM，以此来提高性能效率。

虚拟DOM与真实DOM是通过DOM对象的key来进行匹配的

即使是真实项目里面也会经常看到大量的使用数组的索引作为key值，但是这可能会在某些时候造成不必要的DOM更新

比如下面的例子：

数组元素的位置发生变化

image.png

我们只添加了一条小王的数据，所以其实我们只需要真实DOM更新小王这一条DOM，但是因为小王被放到了数组的最前端，导致所有数据的索引都发生了变化，所以使用索引作为key值的话，实际上三条DOM都被更新了。

当标签嵌套了可输入标签时，可能会造成显示混乱。比如外层标签内容被判定需要更新，而内层标签却被判定为不需要更新，那么就会发生如下情况。
元数据
<li key=0>{小张}<input>{外部输入小张}</input></li>
更新数据
<li key=0>{小王}<input>{外部输入小张}</input></li>
<li key=1>{小张}<input>{空白外部无输入}</input></li>
因为判定粒度时标签级的，key=0这一条数据的<li>标签内容不同，所以更新了。而<input>的内容相同，所以没有更新，最终造成更新结果显示混乱。

我们应该为每一条数据设定唯一标识它的id，使用id作为key值，这样真实DOM就会只更新小王这一条数据。