Vue列表渲染v-for中index作为key的问题

如下图：

 若用Index作为key，当数据更新时，虚拟DOM重新进行对比(diff):

首先,key为0时，文本节点出现不一致,所以要生成一个新的真实DOM

其次，对比input节点，因为虚拟DOM没有value属性，所以input节点是一样的，直接复用

以此类推，就会出现节点错位问题

且因为Key的变化，导致所有的文本节点都要重新渲染

总结:数据更新不在末尾时，使用index做为key会导致重新渲染部分已有数据，降低效率，且可能出现乱序问题

posted @ 2021-10-21 13:10  邢韬  阅读(936)  评论(0)  编辑  收藏  举报