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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞