不能用index作为k
经验:写多个组件组成的集合,要删除其中一个,如果是index作为k。比我我删除第一个,但是实际上删除的是最后一个,只删除了组件,而内容还在。
vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应的旧节点(这里对应的是一个key=>index的map映射)。如果没有找到就认为是一个新增节点。
而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点,一种一个map映射,另一种是遍历查找。
相比而言,map映射速度更快。这种模式会带来一些隐藏的副作用,比如可能不会产生过度效果,或者在某些节点有绑定数据(表单)状态,会出现状态错位。