③ 实现Virtual DOM的下一个VNode节点

1 什么是VNode？

render function 会被转化成 VNode 节点

1.1 Virtual DOM

一个结构类似于真实 DOM 的 js 对象

1.2 实现一个简单的 VNode 类，加入一些基本属性

class VNode {
    constructor (tag, data, children, text, elm) {
        // 当前节点的标签名
        this.tag = tag;
        // 当前节点的一些数据信息
        this.data = data;
        // 当前节点的文本
        this.text = text;
        // 当前虚拟节点对应的真实DOM
        this.elm = elm;
    }
}

栗子

1. Vue组件

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

2. 用 js 代码形式表示该 Vue 组件

function render () {
    return new VNode(
    	'span',
    	{
            // 指令集合数组
            directives: [
                {
                    // v-show指令
                    rawName: 'v-show',
                    expression: 'isShow',
                    name: 'show',
                    value: true
                }
            ],
            // 静态class
            staticClass: 'demo'
    	},
    	[new VNode(undefined, undefined, undefined, 'This is a span.')]
    );
}

3. 转换成 VNode

{
    tag: 'span',
    data: {
        // 指令集合数组
        directives: [
            {
                rawName: 'v-show',
                expression: 'isShow',
                name: 'show',
                value: true
            }
        ],
        // 静态class
        staticClass: 'demo'
    },
    text: undefined,
    children: [
    	// 子节点是一个文本VNode节点
        {
            tag: undefined,
            data: undefined,
            text: 'This is a span.',
            children: undefined
        }
    ]
}

1.3 生成常用 VNode 的方法封装

1. 创建一个空节点

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

2. 创建一个文本节点

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

3. 克隆一个 VNode 节点

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

1.4 总结

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