snabbdom源碼解析（五）鉤子

Worktile 發布于2019-08-23 14:18 / 1127人閱讀

摘要：元素從父節點刪除時觸發，和略有不同，只影響到被移除節點中最頂層的節點在方法的最后調用，也就是完成后觸發源碼解析系列源碼解析一準備工作源碼解析二函數源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址

文件路徑： ./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源碼解析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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