>[success] # Snabbdom - render 函数 1. h函数 将指定规则 进行匹配分配相当于中间层帮助转换为`Vnode` >[danger] ##### Snabbdom 中的 Vnode 1. h 函数返回的 就是`Vnode` 类型 返回值的代码 `return vnode(sel, data, children, text, undefined);`，通过这里可以看出`vnode`函数需要 的参数` return vnode(sel, data, children, text, undefined);` * `sel:String`选择器 * `data:VNodeData ` 属性是虚拟节点用于添加 模块 **属性/样式/事件**等 * `children: Array < VNode | string >`子节点类型此时是`Vnod`类型后期转换后在创建时将其作为子节点添加到父级 DOM 节点中 * `elm:Node `记录 vnode 对应的真实 DOM * `text:string `节点中的内容，和 children 只能互斥 * `key ` 属性用于给旧的、已存在的 DOM 节点提供一个标识，有效避免了不必要的重建操作 ~~~ export interface VNode { // 选择器 sel: string | undefined; // 节点数据：属性/样式/事件等 data: VNodeData | undefined; // 子节点，和 text 只能互斥 children: Array < VNode | string > | undefined; // 记录 vnode 对应的真实 DOM elm: Node | undefined; // 节点中的内容，和 children 只能互斥 text: string | undefined; // 优化用 key: Key | undefined; } export function vnode(sel: string | undefined, data: any | undefined, children: Array < VNode | string > | undefined, text: string | undefined, elm: Element | Text | undefined): VNode { let key = data === undefined ? undefined : data.key; return { sel, data, children, text, elm, key }; } export default vnode; ~~~