1. 首先要知道Vue以及React都使用了虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化,从而更新节点。在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快。

当页面的数据发生变化时,Diff算法只会比较同一层级的节点:

如果节点类型不同,直接干掉前面的节点,再创建并插入新的节点。

如果节点类型相同,则会重新设置该节点的属性,从而实现节点的更新。

总而言之,key的作用主要是为了高效的更新虚拟DOM 。

  1. 为什么不用index作为key呢,是因为,如果在一个v-for list里面,删除中间的一个item,这个时候这个item后面所有的index都会变化,那么diff就会计算出后面的item的key-index映射都发生了变化,就会全部重新渲染,大大影响了性能。而且这也会导致一些bug,比如当删除了item2的时候,再选中item3就会变成选中item4。
Logo

前往低代码交流专区

更多推荐