snabbdom源码解析（五）钩子

Worktile 发布于2019-08-23 14:18 / 1106人阅读

摘要：元素从父节点删除时触发，和略有不同，只影响到被移除节点中最顶层的节点在方法的最后调用，也就是完成后触发源码解析系列源码解析一准备工作源码解析二函数源码解析三对象源码解析四方法源码解析五钩子源码解析六模块源码解析七事件处理个人博客地址

文件路径： ./src/hooks.ts

这个文件主要是定义了 Virtual Dom 在实现过程中，在其执行过程中的一系列钩子。方便外部做一些处理

// 钩子
export interface Hooks {
    // 在 `patch` 开始执行的时候调用
    pre?: PreHook;

    // 在 `createElm`，进入的时候调用init
    // vnode转换为真实DOM节点时触发
    init?: InitHook;

    // 创建真实DOM的时候，调用 create
    create?: CreateHook;

    // 在`patch`方法接近完成的时候，才收集所有的插入节点，遍历调用响应的钩子
    // 可以认为插入到DOM树时触发
    insert?: InsertHook;

    // 在两个节点开始对比前调用
    prepatch?: PrePatchHook;

    // 更新过程中，调用update
    update?: UpdateHook;

    // 两个节点对比完成时候调用
    postpatch?: PostPatchHook;

    // 删除节点的时候调用，包括子节点的destroy也会被触发
    destroy?: DestroyHook;

    // 删除当前节点的时候调用。元素从父节点删除时触发，和destory略有不同，remove只影响到被移除节点中最顶层的节点
    remove?: RemoveHook;

    // 在`patch`方法的最后调用，也就是patch完成后触发
    post?: PostHook;
}

snabbdom源码解析系列

snabbdom源码解析（一）准备工作

snabbdom源码解析（二） h函数

snabbdom源码解析（三） vnode对象

snabbdom源码解析（四） patch 方法

snabbdom源码解析（五）钩子

snabbdom源码解析（六）模块

snabbdom源码解析（七）事件处理

个人博客地址

云服务器 GPU云服务器 snabbdom 三五互联域名解析源码解析 webrtc源码解析

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

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

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
snabbdom源码解析（一）准备工作

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

defcon 2019-08-26 13:26 评论0 收藏0
snabbdom源码解析（三） vnode对象

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

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

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

Kross 2019-08-23 14:18 评论0 收藏0