共计 1039 个字符，预计需要花费 3 分钟才能阅读完成。
首先我们举一个例子
我们现在有这个数组
[
{
id:201401,
name:'chen'
},
{
id:201402,
name:'sun'
}, {
id:201403,
name:'wang'
},]
如果我们使用 index 做 key 在我们渲染到页面的时候变成
<ul>
li key:0，id:201401,name:chen
li key:1 , id:201402,name:sun
li key:2 , id:201403,name:wang
</ul>
如果我们要在中间插入一条数组 {id:201404,name:zhou}
<ul>
li key:0，id:201401,name:chen
li key:1，id:201404,name:wang
li key:2 , id:201402,name:sun
li key:3 , id:201403,name:wang
</ul>
当我们在中间插入新元素的时候 新元素的 key 值理所应当变成了 index=1，key 值也就变成了 1 而原本 index== 1 的 li 元素的 index 就变成了 2，原本 index== 2 的元素 key 值就变成了 3。这样就导致虚拟 dom 的 diff 算法在做比较的时候发现，key 值为 1，2，3 的元素和原来的 key 值为 1，2，3 的元素对比的时候发现二者不一样，diff 算法就会重新渲染这三个元素，原本 key 值为 1，2 的元素内容没有发生变化，但是因为 key 值使用的是 index 所以还需要重新渲染，这就失去了虚拟 dom 在性能上的优势，所有我们要使用唯一键值来做标记，例如 id。
如果我们使用 id 做 key 在我们渲染到页面的时候变成
<ul>
li key:201401 ,id:201401,name:chen
li key:201402 ,id:201402,name:sun
li key:201403 ,id:201403,name:wang
</ul>
如果我们要在中间插入一条数组 {id:201404,name:zhou}
<ul>
li key:201401，id:201401,name:chen
li key:201404，id:201404,name:wang
li key:201402 , id:201402,name:sun
li key:201403 , id:201403,name:wang
</ul>
因为我们是已 id 为 key 值，所以当我们向数组中间插入一个新的数据，diff 算法发现原本的三个 <li> 的 key 值没改变，只是在中间加入了一个新的元素，原本的三个 <li> 得到了复用这也就利用了虚拟 dom 在性能上的优势
