1.什么是虚拟DOM
以前M的命令式操作DOM即使用jQuery操作DOM节点，随着状态的增多，DOM的操作就会越来越频繁，程序的状态也越难维护，现在主流的框架都是采用声明式操作DOM，将操作DOM的方法封装起来，我们只要更改数据的状态，框架本身会帮我们操作DOM。
虚拟DOM根据状态建立一颗虚拟节点树，新的虚拟节点树会与旧的虚拟节点树进行对比，只渲染发生改变的部分，如下图:
2.引入虚拟DOM的目的
把渲染过程抽象化，从而使得组件的抽象能力也得到提升，并且可以适配DOM以外的渲染目标；
可以更好地支持SSR、同构渲染等；
不再依赖HTML解析器进行模板解析，可以进行更多的AOT(预编译)工作提高运行时效率，还能将Vue运行时体积进一步压缩。
VNode的定义 Vue中定义了VNode的构造函数，这样我们可以实例化不同的vnode 实例如：文本节点、元素节点以及注释节点等。
var VNode = function VNode ( tag, data, children, text, elm, context, componentOptions, asyncFactory ) { this.tag = tag; this.data = data; this.children = children; this.text = text; this.elm = elm; this.ns = undefined; this.context = context; this.fnContext = undefined; this.fnOptions = undefined; this.fnScopeId = undefined; this.key = data && data.key; this.componentOptions = componentOptions; this.componentInstance = undefined; this.parent = undefined; this.raw = false; this.isStatic = false; this.isRootInsert = true; this.isComment = false; this.isCloned = false; this.isOnce = false; this.asyncFactory = asyncFactory; this.asyncMeta = undefined; this.isAsyncPlaceholder = false; };
vnode其实就是一个描述节点的对象，描述如何创建真实的DOM节点；vnode的作用就是新旧vnode进行对比，只更新发生变化的节点。 VNode有注释节点、文本节点、元素节点、组件节点、函数式组件、克隆节点:
注释节点
var createEmptyVNode = function (text) { if ( text === void 0 ) text = ''; var node = new VNode(); node.text = text; node.isComment = true; return node };
只有isComment和text属性有效，其余的默认为false或者null
文本节点
function createTextVNode (val) { return new VNode(undefined, undefined, undefined, String(val)) }
只有一个text属性
克隆节点
function cloneVNode (vnode) { var cloned = new VNode( vnode.tag, vnode.data, // #7975 // clone children array to avoid mutating original in case of cloning // a child. vnode.children && vnode.children.slice(), vnode.text, vnode.elm, vnode.context, vnode.componentOptions, vnode.asyncFactory ); cloned.ns = vnode.ns; cloned.isStatic = vnode.isStatic; cloned.key = vnode.key; cloned.isComment = vnode.isComment; cloned.fnContext = vnode.fnContext; cloned.fnOptions = vnode.fnOptions; cloned.fnScopeId = vnode.fnScopeId; cloned.asyncMeta = vnode.asyncMeta; cloned.isCloned = true; return cloned }
克隆节点将vnode的所有属性赋值到clone节点，并且设置isCloned = true，它的作用是优化静态节点和插槽节点。以静态节点为例，因为静态节点的内容是不会改变的，当它首次生成虚拟DOM节点后，再次更新时是不需要再次生成vnode，而是将原vnode克隆一份进行渲染，这样在一定程度上提升了性能。
元素节点 元素节点一般会存在tag、data、children、context四种有效属性,形如:
{ children: [VNode, VNode], context: {...}, tag: 'div', data: {attr: {id: app}} }
组件节点 组件节点有两个特有属性 (1) componentOptions，组件节点的选项参数，包含如下内容:
{ Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children }
(2) componentInstance: 组件的实例，也是Vue的实例 对应的vnode
new VNode( ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')), data, undefined, undefined, undefined, context, { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children }, asyncFactory )
即
{ componentOptions: {}, componentInstance: {}, tag: 'vue-component-1-child', data: {...}, ... }
函数式组件 函数组件通过createFunctionalComponent函数创建, 跟组件节点类似，暂时没看到特殊属性，有的话后续再补上。
patch
虚拟DOM最重要的功能是patch，将VNode渲染为真实的DOM。
patch简介
patch中文意思是打补丁，也就是在原有的基础上修改DOM节点，也可以说是渲染视图。DOM节点的修改有三种:
创建新增节点
删除废弃的节点
修改需要更新的节点。
当缓存上一次的oldvnode与最新的vnode不一致的时候，渲染视图以vnode为准。
初次渲染过程