本文探讨如何利用JavaScript创建虚拟DOM树，并通过Diff算法比较新旧节点，生成patch对象，实现高效地局部DOM更新。首先，将DOM结构转化为JavaScript对象，构建实际DOM树；其次，当状态变化时，创建新的对象树并进行差异比较；最后，应用差异更新DOM，完成视图刷新。这种方法优化了DOM操作，提高了Web应用性能。
概念
用js来模拟DOM中的节点。
diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
简单来说：
diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁
Diff算法的步骤：
1.用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文 档当中
2.当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较(diff)，记录两棵树差异
3.把第二棵树所记录的差异应用到第一棵树所构建的真正的DOM树上(patch)，视图就更新了
扫一扫
7370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
