vue.js 2.0中的虚拟DOM。为什么要引入虚拟DOM？

• vue.js为什么要引入虚拟DOM？

这个需要涉及到vue的响应式系统，在应用程序运行过程中，应用内部的状态会不断发生变化，此时需要不停地重新渲染。

这个渲染是声明式的，通过模板来描述状态和DOM之间的映射关系。那么就需要我们侦测到状态的变化，然后再通知组件进行DOM更新。

vue.js的变化侦测属于“推”，当状态发生变化时，vue.js立刻就知道了，而且再一定程度上知道哪些状态变化了。因此它知道的信息更多，可以进行更新细粒度的更新DOM了。

所谓更细粒度的更新，就是说：假如有一个状态绑定着好多个依赖，每个依赖表示一个具体的DOM节点，那么当这个状态发生变化时，会向这个状态的所有依赖发送通知，让它们进行DOM更新操作。

但是这个更新过程是有代价的，因为粒度越细，每个状态所绑定的依赖就越多，依赖追踪在内存上的开销就越大，因此vue会引入虚拟DOM，将粒度调整为中等粒度，即一个状态所绑定的依赖不再是具体的DOM节点，而是一个组件。状态变化时，会通知组件，组件内部再使用虚拟DOM进行对比。

• 虚拟DOM的原理是什么？

1.虚拟DOM的解决方式是通过状态生成一个虚拟DOM节点树，然后使用虚拟节点树进行渲染，在渲染之前，会使用新生成的虚拟节点树和上一次生成的虚拟节点树进行对比，只渲染不同的部分。 

2.虚拟节点树是由组件树建立起来的整个虚拟节点。

• vue.js中的虚拟DOM 

在vue.js中，我们使用模板来描述状态与DOM之间的映射关系。vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。

• 虚拟DOM主要做了两件事： 

1.提供与真实DOM节点所对应的虚拟节点vnode。

2.将虚拟节点vnode和旧虚拟节点oldVnode进行对比，然后更新视图。 

•  什么是vnode？

 vnode只是一个名字，本质上其实是javascript中一个普通的对象，是从vnode类实例化的对象。我们用这个javascript对象来描述一个真实DOM元素的话，那么该DOM元素上的所有属性在vnode这个对象上都存在对应的属性。

vnode可以理解成节点描述对象，它描述怎么样去创建真实的DOM节点。

我们也可以把vnode理解为javascript对象版本的DOM元素。

• 总结 

虚拟DOM是将状态映射成视图的众多解决方案中的一种，它的运作原理是使用状态生成虚拟节点，然后使用虚拟节点渲染视图。

之所以需要先使用状态生成虚拟节点，是因为如果直接用状态生成真实DOM，会有一定程度的性能浪费。而先创建虚拟节点再渲染视图，就可以将虚拟节点缓存，然后使用新创建的虚拟节点和上一次渲染时缓存的虚拟节点进行对比，然后根据对比结果只更新需要更新的真实DOM节点，从而避免不必要的DOM操作，节省一定的性能开销。