31｜虚拟DOM（下）：想看懂虚拟DOM算法，先刷个算法题
大圣
该思维导图由 AI 生成，仅供参考
你好，我是大圣。上一讲我们仔细分析了 Vue 中虚拟 DOM 如何执行的，整体流程就是树形结构的 diff 计算，但是在 diff 的计算过程中，如何高效计算虚拟 DOM 属性的变化，以及如何更新数组的子元素，需要一些算法知识的补充。
给你提前划个重点，今天我们将讲到如何使用位运算来实现 Vue 中的按需更新，让静态的节点可以越过虚拟 DOM 的计算逻辑，并且使用计算最长递增子序列的方式，来实现队伍的高效排序。我们会剖析 Vue 框架源码，结合对应的 LeetCode 题，帮助你掌握算法的核心原理和实现。
位运算
前面也复习了，在执行 diff 之前，要根据需要判断每个虚拟 DOM 节点有哪些属性需要计算，因为无论响应式数据怎么变化，静态的属性和节点都不会发生变化。
所以我们看每个节点 diff 的时候会做什么，在 renderer.ts 代码文件中就可以看到代码，主要就是通过虚拟 DOM 节点的 patchFlag 树形判断是否需要更新节点。
方法就是使用 & 操作符来判断操作的类型，比如 patchFlag & PatchFlags.CLASS 来判断当前元素的 class 是否需要计算 diff；shapeFlag & ShapeFlags.ELEMENT 来判断当前虚拟 DOM 是 HTML 元素还是 Component 组件。这个“&”其实就是位运算的按位与。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
虚拟DOM算法在Vue框架中扮演着重要角色，本文深入探讨了虚拟DOM算法的实现细节和优化方法。文章首先介绍了位运算的概念及其在Vue中的应用，通过位运算可以高效地判断虚拟DOM节点的属性变化，提高性能。接着，文章以LeetCode题目为例，解释了位运算的性能优势，并介绍了在虚拟DOM计算diff中的算法，着重讲解了如何寻找最长递增子序列的算法。最后，文章提出了贪心+二分的算法，这是Vue 3中采用的算法，能够更加高效地处理虚拟DOM的计算。整体而言，本文深入浅出地介绍了虚拟DOM算法的核心原理和实现方法，对于想深入了解Vue框架内部实现的读者具有很高的参考价值。 文章通过分析Vue 3中虚拟DOM diff中的静态标记功能和最长递增子序列算法，展现了Vue框架在性能优化方面的精妙设计。通过位运算高效判断节点属性变化和使用最长递增子序列算法优化diff计算，Vue框架实现了高效的虚拟DOM操作。这些技术特点不仅展示了Vue框架的高效性能，也为读者提供了深入理解前端框架内部实现的机会。文章内容深入浅出，既有理论分析又有实际代码实现，对于前端工程师学习算法和性能优化具有重要参考价值。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
《玩转 Vue 3 全家桶》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(8)
- 最新
- 精选
- Geek_ec138d大圣老师，全景图的里的newIndexOldIndexMap的长度和值好像不对。。。。
作者回复: 我去确认下
2022-01-19 - xzq// 获取最长递增子序列之后这一步是干啥的，。， 太难理解了 // 还有一个就是为啥要获取最长递增子序列 if (j < 0 || i !== increasingNewIndexSequence[j]) { // insertBefore(nextChild, anchor) // 移动到锚点的前面(这个锚点的意思可以理解为插入到所有已处理节点的后面, 或者所有未处理节点的前面) move(nextChild, container, anchor, MoveType.REORDER) } else { j-- }
作者回复: 获取最长递增子序列的目的 就是为了减少dom移动的次数，最长递增子序列的位置不动，把其他元素移动到正确的位置就可以
2022-01-15 
Kim Yin感觉 newIndexOldIndexMap 不太对2022-03-035
Mr_shaojun太费脑子了2022-12-30归属地：浙江1
小花（fa）newIndexOldIndexMap=[0,3,6,5,0,3]的值没看懂, 然后图中 老序列 h b f d c计算后的最长子序列是多少呢2022-02-231
NULL刚补完算法差不多搞懂LIS后，一转到这个结尾……可是太仓促了，以及评论大家都在质疑尾图里的MAP，作者说去确认可并没有个明确结果，多年未改—— 是对的，毋庸置疑呢（只是最后讲得仓促稀烂让所有人搞不懂）？ 还是就不对，可就懒得、忘了改呢（反正也没几个人看）？2024-01-09归属地：美国1
微扰理论厉害呀 感觉是讲虚拟dom比较清晰的一篇文章了～2022-01-06
费城的二鹏思考题 后端用户权限的设计，采用了位运算，前端也需要位运算解析2021-12-31
收起评论