为什么要添加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
