【Vue原理】Directive - 白話版

RobinQu 發(fā)布于2019-08-23 18:25 / 2546人閱讀

摘要：哎喲，這個鉤子是，更新一個節(jié)點，就馬上執(zhí)行該節(jié)點鉤子的喔。剛剛創(chuàng)建的指令，指令肯定都是新的，就沒必要往下走，浪費性能某個舊指令不存在新指令對象中。證明這個指令已經(jīng)被移除不是新節(jié)點參數(shù)

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關(guān)注公眾號也可以吧

【Vue原理】Directive - 白話版

今天是除夕啦，大家新年快樂！身體健康！2019多多開花，耶，嗨起來！

言歸正傳！

我相信應(yīng)該大家應(yīng)該都使用過 Directive 指令，有時為了能夠直接操作DOM，而指令中最重要的莫過于是鉤子函數(shù)了，指令一共有五個鉤子函數(shù)，他們不會在不同的階段觸發(fā)，文檔也已經(jīng)說明

當(dāng)然了，其實你只要了解它是什么時候觸發(fā)的，就完全可以用在項目。但是我們是不會滿足于此的，我要知道他是怎么觸發(fā)的，怎么調(diào)用到我設(shè)置的鉤子的

今天，我們就來簡單說一下這幾個鉤子都是怎么被調(diào)用的

你能相信我寫 Directive 花了一個星期啊，不是有多難，而是我不知道怎么下手寫啊，根本不知道怎么描述會簡單好了解，吐血

鉤子如何調(diào)用

首先，Vue 在綁定了指令的DOM 創(chuàng)建之后，插入頁面之前，對一些DOM 本身的事件或者屬性等進行處理。

其中，就包含對本DOM的所有指令進行處理

怎么處理呢？每一個鉤子函數(shù)都不一樣，所以我們會分不同鉤子說明

首先，處理時，Vue 要判斷哪些指令是新的還是舊的

所以需要比較舊節(jié)點上的指令和新節(jié)點上的指令

比如新指令比舊指令多了一個指令，如下

// 新指令 newDir 如下

newDir={  

    "v-test":{        
        name: "test",    
        rawName: "v-test"
   }, 

    "v-test2":{        
        name:"test2"
        rawName:"v-test2"
    }  
}



// 舊指令 oldDir 如下，少了一個 v-test2
oldDir={  
    "v-test":{    
        name: "test",   
        rawName: "v-test"
    }  
}

如果是新指令

遍歷新指令對象時，當(dāng) "v-test2" 指令不存在舊指令對象中，則表示這個是新指令，需要初始化

1、bind

遍歷遇到新指令時，直接執(zhí)行 bind 鉤子函數(shù)，并傳入?yún)?shù)

for(i in newDir){    
    var dir = newDir[i]    
    if( !oldDir[i]){
        dir.bind(....參數(shù))
    } 
}

2、inserted

按文檔的說明，我們就知道，inserted 是在節(jié)點插入父節(jié)點調(diào)用

而所有節(jié)點的所有鉤子，會放在同一時間一起處理，并不是插入一個節(jié)點，就執(zhí)行一個節(jié)點的 inserted 鉤子

inserted 分為保存和執(zhí)行兩個步驟

因為inserted 需要在節(jié)點插入之后才執(zhí)行，而現(xiàn)在處理是在節(jié)點插入之前，所以只能先保存起來，用于后面執(zhí)行。

簡單實現(xiàn)如下

// 1、使用一個數(shù)組 保存 本 DOM 的 所有新指令的 inserted 鉤子
var dirInserted = []

for(i in newDir){    
    var dir = newDir[i]    
    if( !oldDir[i]){
        dir.bind(....參數(shù)) 
       dirInserted.push(dir.inserted)
    }
}



// 2、新建一個函數(shù)，專門遍歷這個數(shù)組，逐個執(zhí)行 inserted 鉤子
var callback = function(){    
    for(var i=0;i=dirInserted.length;i++){
        dirInserted[i](....參數(shù))
    }
}



// 3、 把 callback 保存進當(dāng)前節(jié)點的一個地方，為了后面使用
dom.insert = callback

// 4、把 所有含有 callback 的節(jié)點，也放到一個數(shù)組
var insertedVnodeQueue=[]
if( 存在inserted 的 dom ){
    insertedVnodeQueue.push( dom )
}

// 5、當(dāng)節(jié)點插入后，開始遍歷insertedVnodeQueue
for (var i = 0; i 
為了驗證 inserted 鉤子 并不是插入一個節(jié)點，就執(zhí)行一次，我特地在 插入節(jié)點的函數(shù)后面打印一句話，于是可以看到如下的打印順序


bind---> SPAN
插入DOM span

bind---> P
插入DOM p

bind---> DIV
插入DOM div

inserted---> SPAN
inserted---> P
inserted---> DIV
如果是舊指令
遍歷新指令對象時，當(dāng) v-test 指令也存在舊指令對象中，則表示這個是舊指令，需要更新
1、update
碰到舊指令，會直接執(zhí)行 update 鉤子函數(shù)，并傳入?yún)?shù)
for(i in newDir){    
    var dir = newDir[i]    
    if( !oldDir[i]){
        dir.bind(....參數(shù))
    }else{
        dir.update(...參數(shù))
    } 
}
2、componentUpdated
componentUpdated 的保存方式 和 inserted 差不多，但是執(zhí)行方式卻不一樣。
哎喲，這個鉤子是，更新一個節(jié)點，就馬上執(zhí)行該節(jié)點鉤子的喔。跟 inserted 完全不一樣喔，雖然我也不懂為什么
我也在源碼內(nèi)更新 DOM 后加了一句打印，然后我們看下執(zhí)行順序


update---> DIV

update---> SPAN
完成更新DOM span
componentUpdated---> SPAN


update---> P
完成更新DOM p
componentUpdated---> P


完成更新DOM div
componentUpdated---> DIV

3、unbind
當(dāng) 新指令 比 舊指令少了，比如下面這樣
// 舊指令
{  
    "v-test":{   
        name: "test",   
        rawName: "v-test"
    },    

    "v-test2":{     
        name:"test2"
        rawName:"v-test2"
    }  
}

// 新指令
{  

    "v-test":{        

        name: "test",    

        rawName: "v-test"
    }  
}
那么 v-test2 指令被去掉了，這時肯定會觸發(fā) unbind 鉤子
unbind 鉤子也是直接調(diào)用的，沒有那么多轉(zhuǎn)來轉(zhuǎn)去的邏輯幺蛾子，但是需要兩個判斷條件
1、不是新節(jié)點。剛剛創(chuàng)建的指令，指令肯定都是新的，就沒必要往下走，浪費性能
2、某個舊指令 不存在 新指令對象中。證明這個指令已經(jīng)被移除
if( 不是新節(jié)點 ){    
    for(i in oldDir){    
        var dir = oldDir[i]    
        if( !newDir[i]){  
            dir.unbind(....參數(shù))    
        }  
    } 
}

云服務(wù)器 GPU云服務(wù)器 vue安卓版 directive 自定義directive directive_controller

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105200.html

發(fā)表評論

登陸后可評論

0條評論

RobinQu

男|高級講師

我要關(guān)注我要私信

TA的文章

0基礎(chǔ)C語言保姆教學(xué)——第五節(jié) 數(shù)組

閱讀 3924·2021-11-24 09:38
基于C-V2X的闖紅燈預(yù)警方法與流程

閱讀 3106·2021-11-17 09:33
Megalayer雙11香港服務(wù)器和美國服務(wù)器特惠（獨立服務(wù)器月付299元）

閱讀 3878·2021-11-10 11:48
#便宜VPS#Fiberia：1核/4G/50G SSD/2T流量/1Gbps/荷蘭/月付$2.9

閱讀 1244·2021-10-14 09:48
CSS三欄布局的四種方法

閱讀 3137·2019-08-30 13:14
CSS中position屬性（sticky）

閱讀 2554·2019-08-29 18:37
CSS 入門指南：（1）工作原理

閱讀 3400·2019-08-29 12:38
不簡單的前端性能優(yōu)化

閱讀 1423·2019-08-29 12:30

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】Directive - 白話版

相關(guān)文章

**【Vue原理】Mixins - 源碼版**

**【Vue原理】Mixin - 白話版**

**【Vue原理】VModel - 源碼版之表單元素綁定流程**

**【Vue原理】響應(yīng)式原理 - 白話版**

**【Vue原理】月老Computed - 白話版**

發(fā)表評論

0條評論

RobinQu

男|高級講師

TA的文章

0基礎(chǔ)C語言保姆教學(xué)——第五節(jié) 數(shù)組

基于C-V2X的闖紅燈預(yù)警方法與流程

Megalayer雙11香港服務(wù)器和美國服務(wù)器特惠（獨立服務(wù)器月付299元）

#便宜VPS#Fiberia：1核/4G/50G SSD/2T流量/1Gbps/荷蘭/月付$2.9

CSS三欄布局的四種方法

CSS中position屬性（sticky）

CSS 入門指南：（1）工作原理

不簡單的前端性能優(yōu)化

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

【Vue原理】Directive - 白話版

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！