vue列表渲染中的key

为什么要添加key？

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

如果不加key呢？

当页面循环列表中有 input 标签，用户填写信息后，删除中间某一项。
例如：页面中循环列表长度为3，并含有input标签，将input中填入信息，删除中间第二项。

image.png

删除后

image.png

页面中不加key，删除数据的其中一项，对应删除 DOM 节点中的最后一项，可以减少页面重排重绘，DOM 节点就地复用，页面中可能会存在一些数据展示的问题。

添加key

点击删除后

image.png

key 可以作为VNode的唯一标识，vue通过diff算法，加快查询节点的速度，删除对应的dom节点。

key的作用

key给每个VNode唯一的id，可以通过key更快的拿到VNode节点

更准确

每个key都有唯一，新旧节点对比的时候可以避免就地复用
更快

利用key的唯一性，生成map对象获取对应节点，比遍历的方式更快

为什么不能使用 index 作为 key

如果 index 作为key，删除后

image.png

当第二项删除的时候，第三项的下标2会变成1，index在改变，没有办法准确定位到需要删除的 DOM 节点。

代码

<div v-for="(item,index) in arr" :key="index">
   {{item}}
   <input type="text">
</div>

delete(){
    this.arr.splice(1, 1)
}

参考资料

vue 官方文档：
https://cn.vuejs.org/v2/api/#key