vue采用同层节点比较,从最外面一级,依次向下对比。
下图中,左边为原始节点结构,右侧为虚拟DOM更新后的节点结构。
一、移动节点(同级下,各节点使用不同标签)
可能是把B节点直接移动到D后面,也可能是把D移动到B前面,再把C移动到B前面。
二、删除新建(一)(同级下,各节点使用不同标签)
同时删除C节点和其下的E、F子节点,然后在B节点下面分别新建C节点和E、F节点
三、删除新建(二)(同级下,各节点使用不同标签)
在比对过程中,发现C节点不存在了,就会把C节点,连带E、F一并删除,然后新建G节点和E、F节点。
四、更新删除新建(无key)(同级下,各节点使用相同标签)
B1和B2调换顺序,先删除B2下面的E、F,后再新建E、F节点。比较浪费资源,不能很好的复用节点。
五、移动(有key)(同级下,各节点使用相同标签)
每个节点都有了key这个唯一的标识符,会被判定每个节点都是唯一的,直接移动节点即可。
六、插入(有key)(同级下,各节点使用相同标签)
如果没有key,就会是:B2 => B4, B3=>B2, 新建B3;
如果有key,直接在B2前面插入B4。
网友评论