首先我们举一个例子 我们现在有这个数组 [ { id:201401, name:'chen' }, { id:201402, name:'sun' }, { id:201403, name:'wang' }, ]
如果我们使用index做key在我们渲染到页面的时候变成
- li key:0 ,id:201401,name:chen li key:1 , id:201402,name:sun li key:2 , id:201403,name:wang
- 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
如果我们使用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在性能上的优势