vue在處理指令時，會首先判斷指令是新的還是舊的。也就是需要對比舊節點和新節點上的指令。比如新節點比舊節點上多了乙個指令。
// 新節點上指令如下
newdirectives =
,'v-test2':}
// 舊節點上指令如下
newdirectives =
}
v-test2, 當我們遍歷發現v-test2不存在與舊節點指令中是，表明v-test2是新指令，需要被初始化。
// 偽**如下
for(
let i in newdirectives)
}
inserted, 這個鉤子會在節點插入父節點時呼叫，所有節點指令的inserted鉤子會在同一時間處理，並不是插入乙個節點，就執行乙個節點的inserted鉤子。inserted分為儲存和執行兩個步驟，因為需要在節點插入之後才執行，而處理inserted是在節點插入之前，所以只能先儲存起來，用於後面執行。
// 1、使用乙個dirinserted陣列 儲存 本 dom 的 所有新指令的 inserted 鉤子
var dirinserted =
for(i in newdir)
}// 2、新建乙個函式，專門遍歷這個陣列，逐個執行 inserted 鉤子
varcallback
=function()
}// 3、 把 callback 儲存進當前節點的乙個地方，為了後面使用
dom.insert = callback
// 4、把 所有含有 callback 的節點，也放到乙個陣列
var insertedvnodequeue=
if( 存在inserted 的 dom )
// 5、當節點插入後，開始遍歷insertedvnodequeue
for(
var i =
0; i ++i)
v-test，它之前就存在於舊的節點指令集合中，需要更新
for
(let i in newdir)
else
}
componentupdated的儲存方式和inserted差不多，但是執行方式卻不一樣，這個鉤子，更新乙個節點，就馬上執行該節點的鉤子。
unbind，當某個指令只存在於舊節點中，新節點中被移除時，會呼叫unbind方法。
Vue中directive原理分析二
以下面一段vue模板為例 v test v test2 div 以上的模板會被編譯成渲染函式 with this 如何獲取到我們設定的指令的鉤子，入口函式為updatedirectives,用來獲取所有的新指令和舊指令集合。function updatedirectives oldvnode,vno...
Vue封裝常用指令Directive
需求 只能輸入數字 輸入字母和特殊字元自動過濾掉 輸入完成失焦自動加.00 如果輸入了小數自動四捨五入為22.22類似這樣格式 將數值四捨五入後格式化.param num 數值 number或者string param cent 要保留的小數字 number param isthousand 是否需...
vue自定義指令directive
1 指令的使用 v dir1 v color red div type text v focus div 2 建立區域性指令 newvue 建立指令 可以多個 directives color 3 全域性指令,一般在main.js中定義 為繫結的元素自動獲取焦點 vue.directive focu...