snabbdom源码解析（三） vnode对象

willin 发布于2019-08-26 13:26 / 1053人阅读

摘要：对象是一个对象，用来表示相应的结构代码位置定义类型定义类型选择器数据，主要包括属性样式数据绑定时间等子节点关联的原生节点文本唯一值，为了优化性能定义的类型定义绑定的数据类型属性能直接用访问的属性样式类样式数据绑定的事件钩子创建对象根据传入的

vnode 对象

vnode 是一个对象，用来表示相应的 dom 结构

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

定义 vnode 类型

/**
 * 定义VNode类型
 */
export interface VNode {
    // 选择器
    sel: string | undefined;
    // 数据，主要包括属性、样式、数据、绑定时间等
    data: VNodeData | undefined;
    // 子节点
    children: Array | 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; // for thunks
    [key: string]: any; // for any other 3rd party module
}

创建 VNode 对象

// 根据传入的 属性 ，返回一个 vnode 对象
export function vnode(
    sel: string | undefined,
    data: any | undefined,
    children: Array | 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源码解析（七）事件处理

个人博客地址

GPU云服务器云服务器第三域名解析平台 VNode snabbdom js解析三层json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108830.html

snabbdom源码解析（二） h函数

介绍这里是 typescript 的语法，定义了一系列的重载方法。h 函数主要根据传进来的参数，返回一个 vnode 对象代码代码位置： ./src/h.ts /** * 根据选择器，数据，创建 vnode */ export function h(sel: string): VNode; export function h(sel: string, data: VNodeData...

Jensen 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（一）准备工作

摘要：阅读源码的时候，想了解虚拟结构的实现，发现在的地方。然而慢慢的人们发现，在我们的代码中布满了一系列操作的代码。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址前言虚拟 DOM 结构概念随着 react 的诞生而火起来，之后 vue2.0 也加入了虚拟 DOM 的概念。阅读 vue 源码的时候，想了解...

defcon 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（七）事件处理

摘要：这种解决方式也是相当优雅，值得学习源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址事件处理我们在使用 vue 的时候，相信你一定也会对事件的处理比较感兴趣。我们通过 @click 的时候，到底是发生了什么呢！虽然我们用 @click绑定在模板上，不过事件严格绑定在 vnode 上的。 event...

Kross 2019-08-23 14:18 评论0 收藏0
snabbdom源码解析（六）模块

摘要：模块在里面，定义了一系列的模块，这些模块定义了相应的钩子。主要接受两个参数，。传送门事件模块待续。。。源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址模块在 ./src/modules 里面，定义了一系列的模块，这些模块定义了相应的钩子。这些钩子会在 patch 的不同阶段触发，以完成相应模块的...

zone 2019-08-23 14:18 评论0 收藏0
snabbdom源码解析（四） patch 方法

摘要：就近复用为了尽可能不发生的移动，会就近复用相同的节点，复用的依据是判断是否是同类型的元素方法在中，主要是方法。例如元素的之类的详细了解请查看模块模块判断是否是相同的虚拟节点判断是否是相同的虚拟节点方法最后返回一个方法。 patch 方法前言在开始解析这块源码的时候，先给大家补一个知识点。关于两颗 Virtual Dom 树对比的策略 diff 策略同级对比showImg(ht...

huhud 2019-08-26 13:26 评论0 收藏0