Vue在使用v-for时为什么设置key值，为什么不能用index作为key
发布时间
阅读量：
阅读量
为什么设置key值
Vue并不直接操作DOM节点；而是基于js中的Object机制来模拟DOM结构；而虚拟DOM则采用diff算法进行比较。
总体意思来说：只会同级比较，不会跨级比较。
举例：
如上图所示，在同级A、B、C、D四个节点中，在B与C之间插入一个新节点E，在不带key的情况下：C被更新为E，并且D也被更新为C；最后再插入一个节点到D的位置上时效率非常低。有了key之后，则能够准确地定位到相应的位置：经过检查发现ABCD四个节点都没有变化，并且可以直接将新节点E插入到该位置。因此可以看出，键的作用主要是为了高效地维护虚拟DOM结构。
为什么不能用index作为key
例如一组数：
list：[
{
id: 1,
name: 'a',
//index: 0
},
{
id: 2,
name: 'b',
//index: 1
},
{
id: 3,
name: 'c',
//index: 2
},
{
id: 4,
name: 'd',
//index: 3
},
]这样的页面呈现如下：a,b,c,d（其中c为默认选中项）。
若key属性绑定的是索引值，则需执行如下操作：
移除索引值为1的第二组数据（即元素b），在此操作后除了b外的所有元素都将发生索引值变化（其中c的索引值变为1,d的索引值则变为2）。因此也需要对c和d进行相应地重新渲染处理。
值得注意的是，在初始状态下，默认选中的项是c（其原始索引值为2）。当删除b元素后,d元素的索引值将被更新至2的位置。此时页面上默认会将焦点移至d元素。
全部评论 (0)
还没有任何评论哟~