lean Vue源码:虚拟DOM

169 阅读1分钟

20190729 Virtual DOM

render function会被转化成Vnode节点。Virtual DOM其实就是一棵以js对象作为基础的🌲。换句话说:它是一层对真实DOM的抽象

Q1:为什么说虚拟DOM具有跨平台的能力? 答:因为虚拟DOM是以js对象为基础,所以可以运行在浏览器平台、weex、node等

现在来举个🌰:

{
    tag: 'div',                 /*说明这是一个div标签*/
    children: [                 /*存放该标签的子节点*/
        {
            tag: 'a',           /*说明这是一个a标签*/
            text: 'click me'    /*标签的内容*/
        }
    ]
}

渲染后

<div>
    <a>click me</a>
</div>

以上是一个简单的例子,实际上的节点有更多的属性来标志节点 比如isStatic(是否为静态节点)、isComment(是否为注释节点)等