一、vue和react中的diff算法

在vue和react中我们常会听说虚拟dom这个东西，那么它有什么用呢？今天我就用key来解释一下这个东西！今天没有代码，但代码块还是有的哈哈

我们在做数组遍历的时候，往往需要绑定一个key值，不然就会报错的，例如
<ul>
  <li v-for="(item,index) in arr" :key="index">{{item.label}}</li>
</ul>

上面我们遍历了一个数组，然后我们的key是用了index,代码是可以运行起来的，但是其中会有一些你意想不到的问题。首先我们的diff算法是通过key值去对比虚拟dom和真实dom，当key值不变时，就不会产生新的真实dom，这就是为什么要用这个key的缘故，因为这样子可以就地复用原来的dom，不需要生成新的真实dom。

大家有没有注意到一个问题，我用的key是index,用index会有一个问题，那就是当所在节点里面再嵌套一个标签时，如果我往数组里新增了一个节点元素，那么问题就来了，至于什么问题，大家应该都猜到了。因为diff算法会通过key值去对比每个节点，包括节点下面嵌套的元素，当你的key值改变了，但key所在节点下嵌套的元素没有改变，那么bug就出现了。大家可以试试。

二、解决办法

我们可以用元素的唯一值作为key值，例如id等，因为这个是唯一值，所以diff每次比较的时候都不会找错的，你学废了吗