Vue虚拟DOM节点本质

VNode

在vue中定义了一个VNode类，使用它可以实例化不同类型的vnode，而不同类型的vnode实例各自表示不同类型的DOM元素。

VNode作用

每次渲染视图的时候都会new一个VNode的实例化对象，然后他会缓存上一次渲染视图。因此当需要重新渲染视图的时候，将新创建的new_node实例对象和上一次的实例对象old_vnode进行对比，找出不一样的基于此去修改真实DOM。

为什么设计vnode？

Vue2.0中等粒度，状态发生变化时只通知到组件级！即当某个状态发生变化，只通知该状态的组件。也就是说当组件中的状态中任意一个发生了变化，整个组件就会重新渲染
正因为此，对vnode进行缓存，并将old_vnode和new_vnode进行对比，只更新该组件内发生变化的节点。

VNode的类型

vnode共六种类型：
{
1.注释节点
2.文本节点
3.元素节点
4.组件节点
5.函数式组件
6.克隆节点
}

克隆节点

克隆节点是将现有的节点的属性赋值到新节点里。作用是优化静态节点和插槽节点。
静态节点：内容不会发生改变的节点，除了首次渲染需要执行渲染函数获取vnode后，后续更新不需要执行渲染函数重新生成vnode。这时使用创建克隆节点vnode，就不需要重新执行渲染函数了，也就不会再生成新的vnode了

总结

Vue采用虚拟DOM更新视图，而Vue2.0中等粒度，检测到组件级别。因此状态发生变化会重新渲染整个组件，引入vnode后，组件内的所有元素、节点都会对应挂到DOM树上，然后对比新旧vnode将不同的地方进行渲染，很大程度上减少了性能消耗。