4.2 Vnode

Vue在渲染机制的优化上，同样引进了virtual dom的概念，它是用Vnode这个构造函数去描述一个DOM节点。

4.2.1 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;
    ···
    ···
  };

Vnode定义的属性差不多有20几个，显然用Vnode对象要比真实DOM对象描述的内容要简单得多，它只用来单纯描述节点的关键属性，例如标签名，数据，子节点等。并没有保留跟浏览器相关的DOM方法。除此之外，Vnode也会有其他的属性用来扩展Vue的灵活性。

源码中也定义了创建Vnode的相关方法。

4.2.2 创建Vnode注释节点

// 创建注释vnode节点
var createEmptyVNode = function (text) {
    if ( text === void 0 ) text = '';
    var node = new VNode();
    node.text = text;
    node.isComment = true; // 标记注释节点
    return node
};

4.2.3 创建Vnode文本节点

// 创建文本vnode节点
function createTextVNode (val) {
    return new VNode(undefined, undefined, undefined, String(val))
}

4.2.4 克隆vnode

function cloneVNode (vnode) {
    var cloned = new VNode(
      vnode.tag,
      vnode.data,
      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
  }

注意：cloneVnode对Vnode的克隆只是一层浅拷贝，它不会对子节点进行深度克隆。