①vue 的 diff 算法在对新老虚拟 dom 进行对比时,是从节点的两侧向中间对比;如果节点的 key 值与元素类型相同,属性值不同,就会认为是不同节点,就会删除重建;
②react 的 diff 算法在对新老虚拟 dom 进行对比时,是从节点左侧开始对比,就好比将新老虚拟 dom 放入两个栈中,一对多依次对比;如果节点的 key 值与元素类型相同,属性值不同,react 会认为是同类型节点,只是修改节点属性;
③相同点:
1、都只进行同级比较,忽略了跨级操作;常见的现象就是对数组或者对象中的深层元素进行修改时,视图层监测不到其变化,故不会对 dom 进行更新,需调用一些特质方法来告诉视图层需要更新 dom;
2、都用 key 做为唯一标识,进行查找,只有 key 和标签类型相同时才会复用老节点;
3、遍历前都会根据老的节点构建一个 map,方便根据 key 快速查找;
④不同点:
1、react 在 diff 遍历的时候,只对需要修改的节点进行了记录,形成 effect list,最后才会根据 effect list 进行真实 dom 的修改,修改时先删除,然后更新与移动,最后插入;
2、vue 在遍历的时候就用真实 dominsertBefore 方法,修改了真实 dom,最后做的删除操作;
3、react 的虚拟 diff 比较简单,vue 中做了一些优化处理,相对复杂,但效率更高;
(参考:blog.csdn.net/CanTest/art…