Vnode的类型

vnode是一个JavaScript对象，不同类型的vnode之间其实属性不同，准确说是有效属性不同。因为当使用VNode类创建一个vnode时，通过参数为实例设置属性时，无效的属性会默认设置为undefined或者false。对于 vnode身上的无效属性，直接忽略就好。

1、注释节点

由于创建注释节点的过程非常简单，所以直接通过代码来介绍它有哪些属性：

    export const createEmptyVNode = text => {
        const node = new VNode()
        node.text = text;
        node.isComment = true;
        return node
    }

一个注释节点只有两个有效属性 text 和 isComment。其余属性全是默认undefined或者false。
例如一个真实的注释节点，所对应的vnode是下面的样子：

// <!-- 注释节点 -->
{
    text: "注释节点",
    isComment: true
}

2、文本节点

文本节点的创建过程也非常简单，代码如下：

    export function createTextVNode(val) {
        return new VNode(undefined, undefined, undefined, String(val))
    }

当文本类型的vnode被创建时，它只有一个text属性：

{
    text: "文本节点"
}

3、元素节点

元素节点通常会存在以下4中有效属性。

tag：tag就是一个节点的名称，例如 p、ul、li和div等。
data：改属性包含了一些节点上的数据，比如attrs、class和style等。
children：当前节点的子节点列表。
context：它是当前组件的Vue.js实例

一个真实的元素节点，对应得vnode是下面这样：

    // <p><span>Hello</span><span>World</span></p>
    {
        children: [VNode, VNode],
        context: {...},
        data: {...},
        tag: "p",
        ...
    }

4、组件节点

件节点和元素节点类似，有以下两个独有的属性。

componentOptions：组件节点的选项参数，其中包含了propsData、tag和children等信息
componentInstance：组件的实例，也就是Vue.js的实例。事实上，在Vue.js中，每个组件都有一个Vue.js实例。

一个组件节点，对应得vnode是下面这样：

    // <child></child>
    {
        componentInstance: {...},
        componentOptions: {...},
        context: {...},
        data: {...},
        tag: "vue-component-1-child",
        ...    
    }

5、函数式节点

函数式节点和组件节点类似，他有两个独有的属性functionalContext和functionalOptions。
通常，一个函数式节点的vnode是下面这样：

     {
        functionalContext: {...},
        functionalOptions: {...},
        context: {...},
        data: {...},
        tag: "div"
   	  }

6、克隆节点

克隆节点是将现有节点的属性赋值到新节点中，让新创建的节点和被克隆的节点的属性保持一致，从而实现克隆效果。它的作用是优化静态节点和插槽节点（slot node）。

以静态节点为例，当组件内某个状态发生变化后，当前组件会通过虚拟DOM重新渲染视图，静态节点因为它的内容不会改变，所以除了首次渲染需要执行渲染函数获取vnode之外，后续更新不需要执行渲染函数重新生成vnode。

因此，这是就会使用创建克隆节点的方法将vnode克隆一份，使用克隆节点进行渲染。这样就不需要执行渲染函数生成新的静态节点的vnode，从而提升一定的性能。

export function cloneVNode(vnode, deep) {
        const cloned = new VNode(vnode.tag, vnode.data, vnode.children, 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.isCloned = true
        if (deep && vnode.children) {
            cloned.children = cloneVNodes(vnode.children)
        }
        return cloned
    }

克隆现有节点，只需要将现有节点的属性全部赋值到新节点中。
克隆节点和被克隆节点位移的区别是isCloned属性，克隆节点为true，被克隆的原始节点为false。

总结

VNode是一个类，可以生产不同类型的vnode实例，不同类型的实例表示不同类型的真实DOM。

由于Vue.js对组件采用了虚拟DOM来更新视图，当属性发生变化时，整个组件都要进行重新渲染的操作，但组件内并不是所有的DOM节点都需要更新，所以将vnode缓存并将当前新生成的vnode和缓存的vnode作对比，只对需要更新的部分进行DOM操作可以提升很多的性能。

vnode有很多类型，它们本质上都是Vnode实例化出的对象，其唯一区别是属性不同。