Vue 进阶 （四）

Virtual DOM

我们知道render function 会转变为Virtual Dom.Virtual Dom其实就是一种javascript对像作为基础的树，用对象的属性来表示节点，实际是就是对DOM的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。

实现一个VNode

VNode 归根结底就是一个 JavaScript 对象，只要这个类的一些属性可以正确直观地描述清楚当前节点的信息即可。我们来实现一个简单的 VNode 类，加入一些基本属性，为了便于理解，我们先不考虑复杂的情况。

class VNode {
    constructor(tag, data, children, text, elm){
        /*当前节点的标签名*/
        this.tag = tag;
        /*当前节点的一些数据信息，比如props、attrs等数据*/
        this.data = data;
        /*当前节点的子节点，是一个数组*/
        this.children = children;
        /*当前节点的文本*/
        this.text = text;
        /*当前虚拟节点对应的真实dom节点*/
        this.elm = elm;
    }
}

// 组件
<template>
  <span class="demo" v-show="isShow">
    This is a span.
  </span>
</template>

• js代码形式

// 这是 render function
function render(){
    return new VNode(
        'span',
        {
            directives: [
                {
                   /* v-show指令 */
                    rawName: 'v-show',
                    expression: 'isShow',
                    name: 'show',
                    value: true 
                }
            ],
            staticClass: 'demo' 
        },
        [new VNode(undefined, undefined, undefined, 'this is a span')]
    )
}

• 转换为 VNode 之后的情况

// 虚拟DOM结构
{
    tag: 'span',
    data: {
        directives: [
                {
                   /* v-show指令 */
                    rawName: 'v-show',
                    expression: 'isShow',
                    name: 'show',
                    value: true 
                }
            ],
            staticClass: 'demo' 
    },
    children: [
        /* 子节点是一个文本VNode节点 */
        {
            tag: undefined,
            data: undefined,
            text: 'This is a span.',
            children: undefined
        }
    ]
}

实例

• 创建一个空节点

createEmptyVNode () {
    const node = new VNode();
    node.text = '';
    return node;
}

• 创建一个文本节点

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

• 克隆一个VNode节点

function cloneVNode (node) {
    const cloneVnode = new VNode(
        node.tag,
        node.data,
        node.children,
        node.text,
        node.elm
    );
    retuen cloneVnode;
}

总结： VNode 就是一个 JavaScript 对象，用 JavaScript 对象的属性来描述当前节点的一些状态，用 VNode 节点的形式来模拟一棵 Virtual DOM 树。