虚拟DOM与diff算法的实现

虚拟DOM与diff算法的实现

官网概念：Vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上。

而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。


用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在js对象上，操作内存中的js对象的速度显然要快多了。等更新完后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。

虚拟DOM与真实DOM的区别？
1、虚拟DOM不会进行重排与重绘操作；
2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。
3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染。
diff算法的本质是找出两个对象之间的差异
diff算法的核心是子节点数组对比，思路是通过首尾两端对比

diff算法的实现流程
1、patch（container，vnode）
如何将vnode（左边）变成真实的DOM元素（右边）

实现方式

2、patch（vnode, newVnode)
container里面已经有了内容，更新时做对比的过程该如何实现。