snabbdom.js虚拟DOM入门

传送门：https://www.jianshu.com/p/1f1ef915e83e
虚拟dom会渲染成真实dom
vnode 是对 DOM 节点的抽象，既然如此，我们很容易定义它的形式

{
type:String, // String，DOM 节点的类型，如 'div'/'span'
data:Object,  // Object，包括 props，style等等 DOM 节点的各种属性
children : Array // Array，子节点（子 vnode）
}

所以让我们来看下snabbdom.js中对vnode的实际定义又是怎么做的

export interface VNode {
sel: string | undefined; // VNode的选择器，nodeName+id+class的组合
data: VNodeData | undefined; // 存放VNodeData的地方，具体见下面的VNodeData定义
children: Array<VNode | string> | undefined; // vnode的子vnode的地方

elm: Node | undefined; // 存储vnode对应的真实的dom的地方

text: string | undefined; // vnode的text文本，和children只能二选一
key: Key | undefined; // vnode的key值，主要用于后续vnode的diff过程
}