snabbdom源碼解析（三） vnode對象

vnode 對象

vnode 是一個對象，用來表示相應的 dom 結構

代碼位置 ：./src/vnode.ts

定義 vnode 類型

/**
 * 定義VNode類型
 */
export interface VNode {
    // 選擇器
    sel: string | undefined;
    // 數據，主要包括屬性、樣式、數據、綁定時間等
    data: VNodeData | undefined;
    // 子節點
    children: Array<VNode | string> | undefined;
    // 關聯的原生節點
    elm: Node | undefined;
    // 文本
    text: string | undefined;
    // key , 惟一值，爲了優化性能
    key: Key | undefined;
}

定義 VNodeData 的類型

/**
 * 定義VNode 綁定的數據類型
 */
export interface VNodeData {
    // 屬性 能直接用 . 訪問的
    props?: Props;
    // 屬性
    attrs?: Attrs;
    // 樣式類
    class?: Classes;
    // 樣式
    style?: VNodeStyle;
    // 數據
    dataset?: Dataset;
    // 綁定的事件
    on?: On;

    hero?: Hero;
    attachData?: AttachData;
    // 鉤子
    hook?: Hooks;
    key?: Key;
    ns?: string; // for SVGs
    fn?: () => VNode; // for thunks
    args?: Array<any>; // for thunks
    [key: string]: any; // for any other 3rd party module
}

建立 VNode 對象

// 根據傳入的 屬性 ，返回一個 vnode 對象
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: sel,
        data: data,
        children: children,
        text: text,
        elm: elm,
        key: key
    };
}
export default vnode;

snabbdom源碼解析系列

snabbdom源碼解析（一） 準備工做

snabbdom源碼解析（二） h函數

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五） 鉤子

snabbdom源碼解析（六） 模塊

snabbdom源碼解析（七） 事件處理

我的博客地址