在深入探究虚拟dom的原理之前，先了解一下其概念是十分有必要的一件事。

  什么是虚拟dom？

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

  一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，这些步骤在浏览器的渲染过程及页面加载的优化方案一文中有详细的说明。

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

  这么说可能还是有点生硬，下面用一个实例来说明一下传统dom操作和虚拟dom操作的不同点

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

  如上dom结构所示，现在需要将数字1所在的标签删除，在3所在的标签后面加入一个包含4的li标签。（你也可以理解为，li里的数据都加一）

  用传统jquery操作dom的思想，可以先删除<li>1</li>标签（remove),插入<li>4</li>标签（append)

  上述操作包含了两个JavaScript和DOM之间的交互操作，虽说JavaScript的设计初衷就是实现DOM交互，但这种操作的性能问题依旧存在，所以我学习JavaScript的第一节课就被告知要尽量减少js和dom的交互。虚拟dom就是为了减少这种交互而设计的，那么虚拟dom会如何处理上述问题呢？

  第一步：通过树的形式保存旧的dom信息，这些信息可能在页面第一次加载的时候被渲染到浏览器中，但仍是通过虚拟dom的方式创建的

  第二步：检测到数据更新，需要更新dom，先在JavaScript中将需要修改的节点全部修改完成（这个步骤可以进行算法上的优化，会在后面的原理中详细说明）

  第三步：将最终生成的虚拟DOM更新到视图中去。

  上述三个步骤只需要进行一次dom交互就可以完成视图的更新，因为所有有关dom的操作都预先通过操作数据方式在JavaScript中完成了，这样做的好处不言而喻，而付出的代价只是在你的内存中需要保存一份可供维护的数据信息。

  

  关于虚拟dom和数据双向绑定的源码分析下面有两篇质量较高的git传送门（带详细注释）

  数据双向绑定

  虚拟dom