diff算法详解释

2023-12-21 16:35:31

diff算法：第一次对比真实dom和虚拟树之间的同层差别，后面为对比新旧虚拟dom树之间的同层差别。

虚拟dom：就是用对象模拟真实dom，对象具体属性为：?

sel:标签名，data:节点属性，children:子节点，elm:对应的真实节点，key：当前节点的key，text：当前节点的文字内容

相较于真实dom的比较，需要属性更加的少 效率更加的高。

vue的比较方法是?前后指针法

分别 设置为新头-startIndex，新尾-endIndex，旧头-oldStartIndex，旧尾-oldEndIndex，分别进行

1.新头-旧头（移动虚拟dom）

2.新尾-旧尾（移动虚拟dom）

3.旧头-新尾（移动真实dom）

4.旧尾-新头（移动真实dom）

的节点比较?

如果找到相同的节点则，进行位置更改，1和2是虚拟节点的移动，3和4是进行真实节点的移动

如果新指针指向的节点并没有被匹配到? 那么将循环所有的老节点跟新指针指向的节点的key去做匹配，匹配上了移动节点，匹配不成功则新加节点

指针头++ 指针尾-- 直到前指针>后指针结束

如果旧子节点先处理完了，新子节点有剩余，说明有要新增的节点。

如果新子节点先处理完了，旧子节点有剩余，说明有要删除的节点。

参考：十分详细的diff算法原理解析-CSDN博客

文章来源:https://blog.csdn.net/weixin_44383533/article/details/135112746
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。