本文主要是介绍vue源码学习——虚拟dom树是如何定义的,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
情景:相信通过前面的学习你已经知道了虚拟dom为什么会被构思,那么接下来你好奇的应该是作者该如何定义这个虚拟dom
- vnode基类的定义(源码地址https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/vnode.js)
export default class VNode {tag: string | void;//当前节点的标签名data: VNodeData | void;//当前节点对应的对象,包含了一些具体的数据信息,是一个VNodeData类型,可以参考VNodeData类型中的数据信息children: ?Array<VNode>;//当前节点的子节点是一个数组text: string | void;//当前节点的文本elm: Node | void;//当前虚拟节点对应的真实dom节点ns: string | void;//当前节点的名字空间context: Component | void; // rendered in this component's scope 当前节点的编译作用域functionalContext: Component | void; // only for functional component root nodes函数化组件作用域key: string | number | void;//节点的key属性,被当作节点的标志,用以优化componentOptions: VNodeComponentOptions | void;//组件的option选项
这篇关于vue源码学习——虚拟dom树是如何定义的的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!