对于源码的阅读应该是建立在实际需要的过程中，这样才是科学的学习方式，不然一味地全盘阅读，先不说能不能读得完，这过程也是非常痛苦和枯燥。最近在应用虚拟列表的过程中发现vue3的更新方式给我造成了困惑，遂重温下vue2的diff算法，顺便学习下vue3的diff算法
说一下主要流程
- 对比key
- 对比tag
- 对比comment
- 对比是否同一个Input、
- 对比placeholder
遵循一个基本原则：
先优先处理好处理的边界情况，最后全量递归对比
处理边界情况
- 新节点存在文本节点的情况下，当旧节点的子节点和新节点的子节点都存在的情况下，开始diff算法（也就是③），等会讲。
- 当旧节点没有子节点的情况下，检查新节点子节点的key的重复性.如果旧节点存在文本节点，则清空文本节点。然后批量将新节点的子节点添加到elem后面
- 如果旧节点存在子节点，则移除所以的子节点。
- 如果新节点没有子节点但是旧节点有子节点，则清空旧节点的文本内容
- 若新旧节点文本内容不同则替换。
③ 具体diff算法（全量递归对比）
讯享网
下面用图示表示下vue2 diff的过程
下面图示表示下vue3 diff的过程
这里说下最定长稳定序列，因为大部分情况下，页面都是静态或者没有变化的元素，因此，这部分操作无疑是无效对比，浪费性能。新旧vVode列表相同的部分就是最长稳定序列。对比vue2的全量对比，提高了性能。
最长稳定序列（递增）用算法举例如下：
数列 的最长稳定（递增）序列如下；
附一道最长递增(连续)序列算法
讯享网
附一道最长递增(不用连续)序列算法
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/148956.html