vue的虚拟dom

为什么用vue

1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能

2.虚拟dom,通过diff算法,减少性能的消耗
vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树，然后将其整合成一棵渲染树，再通过布局算法去计算每个节点在浏览器中的位置，最终输出到显示器上，
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息，而这些信息可以通过对象的形式一直保存在内存中，并通过JavaScript的操作进行维护。

用传统jquery操作dom的思想，可以先删除,然后再插入新的标签

虚拟dom会如何处理上述问题呢？

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

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

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

需要付出的代价付出的只是在你的内存中需要保存一份可供维护的数据信息