什么是VNode

4,354 阅读1分钟

Virtual DOM 其实就是一棵以 js对象(VNode节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。Virtual DOM 以js对象作为基础,不依赖真实的环境,所以具有跨平台性,可以运行在

Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。

自己实现一个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;
        }
    }
    
    function createVNode () {
        const node = new VNode();
        node.tag = 'a';
        node.text = '123';
        return node;
    }    
}