对于源码的阅读应该是建立在实际需要的过程中，这样才是科学的学习方式，不然一味地全盘阅读，先不说能不能读得完，这过程也是非常痛苦和枯燥。最近在应用虚拟列表的过程中发现vue3的更新方式给我造成了困惑，遂重温下vue2的diff算法，顺便学习下vue3的diff算法
说一下主要流程
- 对比key
- 对比tag
- 对比comment
- 对比是否同一个Input、
- 对比placeholder
遵循一个基本原则：
先优先处理好处理的边界情况，最后全量递归对比
处理边界情况
- 新节点存在文本节点的情况下，当旧节点的子节点和新节点的子节点都存在的情况下，开始diff算法（也就是③），等会讲。
- 当旧节点没有子节点的情况下，检查新节点子节点的key的重复性.如果旧节点存在文本节点，则清空文本节点。然后批量将新节点的子节点添加到elem后面
- 如果旧节点存在子节点，则移除所以的子节点。
- 如果新节点没有子节点但是旧节点有子节点，则清空旧节点的文本内容
- 若新旧节点文本内容不同则替换。
③ 具体diff算法（全量递归对比）
下面用图示表示下vue2 diff的过程
下面图示表示下vue3 diff的过程
这里说下最定长稳定序列，因为大部分情况下，页面都是静态或者没有变化的元素，因此，这部分操作无疑是无效对比，浪费性能。新旧vVode列表相同的部分就是最长稳定序列。对比vue2的全量对比，提高了性能。
最长稳定序列（递增）用算法举例如下：
数列 的最长稳定（递增）序列如下；
附一道最长递增(连续)序列算法
附一道最长递增(不用连续)序列算法
到此这篇vue2与vue3 diff（vue2与vue3 diff算法）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/25492.html