Virtual Dom并不是真正意义上的Dom，而是一个轻量级的JavaScript对象，在状态发生变化的时候，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
与DOM操作相比，Virtual Dom是基于JavaScript计算的，所以开销会小很多。
用Virtual Dom创建的JavaScript对象一般会是这样：
var vNode= {
tag:"div",
attributes:{
id:"main"
},
children:[
//节点
]
}
vNode对象通过一些特定的选项描述了真实的DOM结构。
在Vue.js2中，Virtual Dom就是通过一种VNode类表达的，每个DOM元素或者组件都对应一个VNode对象，在Vue.js源码中是这样定义的：
export interface VNode{
tag?:string;
data?:VNodeData;
children?:VNode[];
text?:string;
elm?:Node;
ns?:string;
context?:Vue;
key?:string | number;
componentOptions?:VNodeComponentOptions;
componentInstance?:Vue;
parent?:VNode;
raw?:boolean;
isStatic?:boolean;
isRootInsert:boolean;
isComponent:boolean;
}
具体含义如下：
tag：当前节点的标签名
data：当前节点的数据对象
children：子节点，数组，也是VNode类型
text：当前节点的文本，一般文本节点或注释节点会有该属性
elm：当前虚拟节点对应的真实的DOM节点
ns：节点的namespace
context：编译作用域
functionalContext：函数化组件的作用域
key：节点的key属性，用于作为节点的标识，有利于patch的优化
componentOptions：创建组件实例时会用到的选项信息
child：当前节点对应的组件实例
parent：组建的占位节点
raw：原始html
isStatic：静态节点的标识
isRootInsert：是否作为根节点插入，被<transition>包裹的节点，该属性的值为false
isComment：当前节点是都是注释节点
isCloned：当前节点是否为克隆节点
isOnce：当前节点是否有v-once指令
VNode主要分为以下几类：
TextVNode 文本节点
ElementVNode 普通元素节点
ComponentVNode 组件节点
EmptyVNode 没有内容的注释节点
CloneVNode 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true
使用Virtual Dom就可以完全发挥JavaScript的编程能力。在多数场合，我们使用template就足够了，但在一些特定的场景下，使用Virtual Dom会更简单。
原文地址：https://www.cnblogs.com/Romantic-Blood/p/11108160.html