虚拟DOM，Virtual DOM，virtual dom

虚拟DOM的文章现在已经很多了，但是如何紧密结合vue中，到实际的运用是我们分析的重点，这里只是粗略下。

原理：

简单的说，直接通过JS操作浏览器API去绘制DOM节点是很慢的，大量的页面处理中，开发者不经意就会调用更多多余或者重复的操作，这种是有性能开销的。那么有什么办法减少这种是误操作呢？就是通过一种方式能算出来最小的更新量，从而提高效率。既然要计算出对小的更新量，那么就会有对比，需要通过对新旧两个节点的对比从而计算出。DOM的操作很慢，但是JS确很快的，DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来，既然我们可以用JS对象表示DOM结构，那么当数据状态发生变化而需要改变DOM结构时，我们先通过JS对象表示的虚拟DOM计算出实际DOM需要做的最小变动，反过来，就可以根据这个用 JavaScript 对象表示的树结构来构建一棵真正的DOM树，操作实际DOM更新了， 从而避免了粗放式的DOM操作带来的性能问题。

根据上面的原理，Virtual DOM在实现上首先就必须先建立可以对比的JS对象，这个叫做vnode，也就是虚拟DOM了，这个对象是真实DOM结构的一个映射，通过对比更新前后vnode的变化差异diff，记录下来的不同就是我们需要对页面真正的 DOM 操作。

Virtual DOM算法，简单总结下包括几个步骤：

1、用JS对象描述出DOM树的结构，然后在初始化构建中，用这个描述树去构建真正的DOM，并实际展现到页面中
2、当有数据状态变更时，重新构建一个新的JS的DOM树，通过新旧对比DOM数的变化diff，并记录两棵树差异
3、把步骤2中对应的差异通过步骤1重新构建真正的DOM，并重新渲染到页面中，这样整个虚拟DOM的操作就完成了，视图也就更新了

看到这里可以简单总结下，Vue中Watcher与Virtual DOM的关系：

• Watcher 是来决定你要不要更新这个dom
• 虚拟DOM是用来找出怎么以最小的代价来更新