【Vue原理】Directive - 白話版

RobinQu 發布于2019-08-23 18:25 / 2537人閱讀

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

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

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

【Vue原理】Directive - 白話版

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

言歸正傳！

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

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

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

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

鉤子如何調用

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

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

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

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

所以需要比較舊節點上的指令和新節點上的指令

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

// 新指令 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"
    }  
}

如果是新指令

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

1、bind

遍歷遇到新指令時，直接執行 bind 鉤子函數，并傳入參數

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

2、inserted

按文檔的說明，我們就知道，inserted 是在節點插入父節點調用

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

inserted 分為保存和執行兩個步驟

因為inserted 需要在節點插入之后才執行，而現在處理是在節點插入之前，所以只能先保存起來，用于后面執行。

簡單實現如下

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

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



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



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

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

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


bind---> SPAN
插入DOM span

bind---> P
插入DOM p

bind---> DIV
插入DOM div

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


update---> DIV

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


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


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

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

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

// 新指令
{  

    "v-test":{        

        name: "test",    

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

云服務器 GPU云服務器 vue安卓版 directive 自定義directive directive_controller

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105200.html

【Vue原理】Mixins - 源碼版

寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧【Vue原理】Mixins - 源碼版今天探索的是 mixins 的源碼，mixins 根據不同的選項類型會做不同的處理篇幅會有些長，...

gotham 2019-08-23 18:32 評論0 收藏0
【Vue原理】Mixin - 白話版

摘要：而我覺得現在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內部的工作原理。而這個不會合并，直接替換掉整個選項寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版...

CollinPeng 2019-08-23 18:25 評論0 收藏0
【Vue原理】VModel - 源碼版之表單元素綁定流程

摘要：首先，兄弟，容我先說幾句涉及源碼很多，篇幅很長，我都已經分了上下三篇了，依然這么長，但是其實內容都差不多一樣，但是我還是毫無保留地給你了。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也...

sarva 2019-08-23 18:25 評論0 收藏0
【Vue原理】響應式原理 - 白話版

摘要：所以我今后打算把每一個內容分成白話版和源碼版。有什么錯誤的地方，感謝大家能夠指出響應式系統我們都知道，只要在實例中聲明過的數據，那么這個數據就是響應式的。什么是響應式，也即是說，數據發生改變的時候，視圖會重新渲染，匹配更新為最新的值。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 V...

gggggggbong 2019-08-23 18:21 評論0 收藏0
【Vue原理】月老Computed - 白話版

摘要：如果沒有緩存，我們將不可避免的多次執行的現在我們要開始講解，是如何判斷是否使用緩存的首先計算后，會把計算得到的值保存到一個變量中。當使用緩存時，就直接返回這個變量。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或...

Tony_Zby 2019-08-23 18:21 評論0 收藏0