关于vue.js:vfor为什么要加上key字段

v-for 在渲染结束之后，如果有了新的改变，比方是在数组两头增加了一个元素，这个时候会执行diff算法去判断，拿到两个数组之后获取两个数组的长度，用较短的 length 去进行遍历比拟，以以后条件下效率最高的形式执行更改。
此时，如果元素没有增加 key 字段，遍历渲染如下：

看图咱们能够发现，从匹配到不同元素之后就开始替换和新增造成了资源节约，而后咱们看一下，加了key 之后的遍历流程，通过对key的匹配，实现最大水平上的复用：

如果了解有误，欢送斧正！