为何vue中的v-for key值不引荐运用index

2024年4月9日 261次阅读 来源: 早起的虫子被鸟吃

起首我们举一个例子
我们如今有这个数组
[

{
    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在性能上的上风

    原文作者：早起的虫子被鸟吃
    原文地址: https://segmentfault.com/a/1190000019128999
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞