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源码剖析(七) 事宜处置惩罚

个人博客地址

    原文作者:chen4342024
    原文地址: https://segmentfault.com/a/1190000017519058
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞