亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

snabbdom源碼解析(五) 鉤子

Worktile / 1190人閱讀

摘要:元素從父節(jié)點(diǎn)刪除時(shí)觸發(fā),和略有不同,只影響到被移除節(jié)點(diǎn)中最頂層的節(jié)點(diǎn)在方法的最后調(diào)用,也就是完成后觸發(fā)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址

文件路徑 : ./src/hooks.ts

這個(gè)文件主要是定義了 Virtual Dom 在實(shí)現(xiàn)過(guò)程中,在其執(zhí)行過(guò)程中的一系列鉤子。方便外部做一些處理

// 鉤子
export interface Hooks {
    // 在 `patch` 開(kāi)始執(zhí)行的時(shí)候調(diào)用
    pre?: PreHook;

    // 在 `createElm`,進(jìn)入的時(shí)候調(diào)用init
    // vnode轉(zhuǎn)換為真實(shí)DOM節(jié)點(diǎn)時(shí)觸發(fā)
    init?: InitHook;

    // 創(chuàng)建真實(shí)DOM的時(shí)候,調(diào)用 create
    create?: CreateHook;

    // 在`patch`方法接近完成的時(shí)候,才收集所有的插入節(jié)點(diǎn),遍歷調(diào)用響應(yīng)的鉤子
    // 可以認(rèn)為插入到DOM樹(shù)時(shí)觸發(fā)
    insert?: InsertHook;

    // 在兩個(gè)節(jié)點(diǎn)開(kāi)始對(duì)比前調(diào)用
    prepatch?: PrePatchHook;

    // 更新過(guò)程中,調(diào)用update
    update?: UpdateHook;

    // 兩個(gè)節(jié)點(diǎn)對(duì)比完成時(shí)候調(diào)用
    postpatch?: PostPatchHook;

    // 刪除節(jié)點(diǎn)的時(shí)候調(diào)用,包括子節(jié)點(diǎn)的destroy也會(huì)被觸發(fā)
    destroy?: DestroyHook;

    // 刪除當(dāng)前節(jié)點(diǎn)的時(shí)候調(diào)用。元素從父節(jié)點(diǎn)刪除時(shí)觸發(fā),和destory略有不同,remove只影響到被移除節(jié)點(diǎn)中最頂層的節(jié)點(diǎn)
    remove?: RemoveHook;

    // 在`patch`方法的最后調(diào)用,也就是patch完成后觸發(fā)
    post?: PostHook;
}
snabbdom源碼解析系列

snabbdom源碼解析(一) 準(zhǔn)備工作

snabbdom源碼解析(二) h函數(shù)

snabbdom源碼解析(三) vnode對(duì)象

snabbdom源碼解析(四) patch 方法

snabbdom源碼解析(五) 鉤子

snabbdom源碼解析(六) 模塊

snabbdom源碼解析(七) 事件處理

個(gè)人博客地址

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/100420.html

相關(guān)文章

  • snabbdom源碼解析(六) 模塊

    摘要:模塊在里面,定義了一系列的模塊,這些模塊定義了相應(yīng)的鉤子。主要接受兩個(gè)參數(shù),。傳送門(mén)事件模塊待續(xù)。。。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 模塊 在 ./src/modules 里面,定義了一系列的模塊 , 這些模塊定義了相應(yīng)的鉤子 。這些鉤子會(huì)在 patch 的不同階段觸發(fā),以完成相應(yīng)模塊的...

    zone 評(píng)論0 收藏0
  • snabbdom源碼解析(四) patch 方法

    摘要:就近復(fù)用為了盡可能不發(fā)生的移動(dòng),會(huì)就近復(fù)用相同的節(jié)點(diǎn),復(fù)用的依據(jù)是判斷是否是同類(lèi)型的元素方法在中,主要是方法。例如元素的之類(lèi)的詳細(xì)了解請(qǐng)查看模塊模塊判斷是否是相同的虛擬節(jié)點(diǎn)判斷是否是相同的虛擬節(jié)點(diǎn)方法最后返回一個(gè)方法。 patch 方法 前言 在開(kāi)始解析這塊源碼的時(shí)候,先給大家補(bǔ)一個(gè)知識(shí)點(diǎn)。關(guān)于 兩顆 Virtual Dom 樹(shù)對(duì)比的策略 diff 策略 同級(jí)對(duì)比showImg(ht...

    huhud 評(píng)論0 收藏0
  • snabbdom源碼解析(一) 準(zhǔn)備工作

    摘要:閱讀源碼的時(shí)候,想了解虛擬結(jié)構(gòu)的實(shí)現(xiàn),發(fā)現(xiàn)在的地方。然而慢慢的人們發(fā)現(xiàn),在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 前言 虛擬 DOM 結(jié)構(gòu)概念隨著 react 的誕生而火起來(lái),之后 vue2.0 也加入了虛擬 DOM 的概念。 閱讀 vue 源碼的時(shí)候,想了解...

    defcon 評(píng)論0 收藏0
  • snabbdom源碼解析(三) vnode對(duì)象

    摘要:對(duì)象是一個(gè)對(duì)象,用來(lái)表示相應(yīng)的結(jié)構(gòu)代碼位置定義類(lèi)型定義類(lèi)型選擇器數(shù)據(jù),主要包括屬性樣式數(shù)據(jù)綁定時(shí)間等子節(jié)點(diǎn)關(guān)聯(lián)的原生節(jié)點(diǎn)文本唯一值,為了優(yōu)化性能定義的類(lèi)型定義綁定的數(shù)據(jù)類(lèi)型屬性能直接用訪問(wèn)的屬性樣式類(lèi)樣式數(shù)據(jù)綁定的事件鉤子創(chuàng)建對(duì)象根據(jù)傳入的 vnode 對(duì)象 vnode 是一個(gè)對(duì)象,用來(lái)表示相應(yīng)的 dom 結(jié)構(gòu) 代碼位置 :./src/vnode.ts 定義 vnode 類(lèi)型 /** ...

    willin 評(píng)論0 收藏0
  • snabbdom源碼解析(七) 事件處理

    摘要:這種解決方式也是相當(dāng)優(yōu)雅,值得學(xué)習(xí)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對(duì)象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個(gè)人博客地址 事件處理 我們?cè)谑褂?vue 的時(shí)候,相信你一定也會(huì)對(duì)事件的處理比較感興趣。 我們通過(guò) @click 的時(shí)候,到底是發(fā)生了什么呢! 雖然我們用 @click綁定在模板上,不過(guò)事件嚴(yán)格綁定在 vnode 上的 。 event...

    Kross 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<