来自 关于科技 2019-09-02 13:02 的文章
当前位置: 正版输尽光 > 关于科技 > 正文

下的一个,DOM下的一个VNode节点

标题:达成 Virtual DOM 下的多少个 VNode 节点

什么是VNode


作者:彭凯

图片 1

大家清楚,render function 会被转化成 VNode 节点。Virtual DOM 其实便是一棵以 JavaScript 对象(VNode 节点)作为基础的树,用对象属性来说述节点,实际上它只是一层对实在 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;

    }

}

用 JavaScript 代码方式便是如此的。

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.') ]

    );

}

拜望转变来 VNode 现在的气象。

{

    tag: 'span',

    data: {

        /* 指令集结数组 */

        directives: [

            {

                /* v-show指令 */

                rawName: 'v-show',

                expression: 'isShow',

                name: 'show',

                value: true

            }

        ],

        /* 静态class */

        staticClass: 'demo'

    },

    text: undefined,

    children: [

        /* 子节点是一个文本VNode节点 */

        {

            tag: undefined,

            data: undefined,

}

未完待续......

什么是VNode

兑现三个VNode什么是VNode

咱俩驾驭,render function 会被转化成 VNode 节点。Virtual DOM 其实正是一棵以 JavaScript 对象作为基础的树,用对象属性来描述节点,实际上它只是一层对实际 DOM 的虚幻。最终能够透过一类别操作使这棵树映射到真实碰到上。由于 Virtual DOM 是以 JavaScript 对象为根基而不借助真实平台情状,所以使它有着了跨平台的力量,比方说浏览器平台、Weex、Node 等。.完成二个VNode

VNode 百川归海便是多个 JavaScript 对象,只要那几个类的有个别属性能够正确直观地描述清楚当前节点的消息就能够。大家来完成一个粗略的 VNode 类,参与一些基本天性,为了有助于精通,我们先不思量复杂的气象。

图片 2

例如说小编当下有那样三个 Vue 组件。

图片 3

用 JavaScript 代码格局正是那样的。

图片 4

拜谒转变来 VNode 未来的图景。

图片 5

接下来我们能够将 VNode 进一步封装一下,可以兑现部分产生常用 VNode 的法子。创立三个空节点function createEmptyVNode () {

const node = new VNode();

node.text = '';

return node;

}

创造贰个文书节点function createTextVNode {

return new VNode(undefined, undefined, undefined, String;

}

仿造一个 VNode 节点function cloneVNode {

const cloneVnode = new VNode(

node.tag,

node.data,

node.children,

node.text,

node.elm

);

return cloneVnode;

}

总的看,VNode 便是三个 JavaScript 对象,用 JavaScript 对象的质量来说述当前节点的有的场地,用 VNode 节点的花样来效仿一棵 Virtual DOM 树。

本文由正版输尽光发布于关于科技,转载请注明出处:下的一个,DOM下的一个VNode节点

关键词: