美文网首页前端新手
vue 虚拟DOM(vnode)更新机制,difff 算法

vue 虚拟DOM(vnode)更新机制,difff 算法

作者: 刘员外__ | 来源:发表于2020-08-07 22:46 被阅读0次

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。

相关文章

网友评论

    本文标题:vue 虚拟DOM(vnode)更新机制,difff 算法

    本文链接:https://www.haomeiwen.com/subject/pjmprktx.html