脚本宝典收集整理的这篇文章主要介绍了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 树。

脚本宝典总结

以上是脚本宝典为你收集整理的Vue 进阶 （四）全部内容，希望文章能够帮你解决Vue 进阶 （四）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。