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源码解析（七） 事件处理

我的博客地址