情景:相信通过前面的学习你已经知道了虚拟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选项