>[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; ~~~