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

3次阅读

共计 222 个字符,预计需要花费 1 分钟才能阅读完成。

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

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

如果了解有误,欢送斧正!

正文完
 0