以下面一段vue模板為例
v-test
v-test2
>
div>
with
(this),
]})}
updatedirectives, 用來獲取所有的新指令和舊指令集合。
function
updatedirectives
(oldvnode, vnode)
normalizedirectives$1函式，這個函式就是獲取指令的核心方法
function
normalizedirectives$1
(dirs, name)
;var i, dir;
// 遍歷本節點的所有的指令，逐個從組建中獲取
for(i =
0; i < dirs.length; i++
)return res;
}
directives會變成一下這個樣子
directives:[,
unbind()
}}]
下面主要來看inserted和componentupdated
inserted是在dom插入父節點之後才觸發，而處理inserted是在dom插入之前，所以這裡不可能直接觸發，inserted分為儲存和執行兩個步驟
function
updatedirectives
(oldvnode, vnode)}}
if(dirswithinsert.length)};
// 合併到hook中的insert
if(iscreate)
else
}}
function
patch
(oldvnode, vnode, hydrating, removeonly, parentelm, refelm)
// 不是更新，而是頁面初始化
else
return vnode.elm
}
function
createelm
(
vnode,insertedvnodequeue,
parentelm,refelm)}
// 處理本節點的事件，屬性等，其中包含對指令的處理
invokecreatehooks
(vnode, insertedvnodequeue)
;// 插入 本dom 到父節點中
insert
(parentelm, vnode.elm, refelm)
;}
// 將之前儲存的insert鉤子一次性全部觸發
function
invokeinserthook
(vnode, insertedvnodequeue)
}
componentupdated也是分為儲存和執行兩段原始碼
// 把指令componentupdated的函式 和本節點的 postpatch 合併起來
if(dirswithpostpatch.length)})
;}
function
patch
(oldvnode, vnode)
return vnode.elm
}function
patchvnode
(oldvnode, vnode)
}
Vue中directive原理分析
vue在處理指令時，會首先判斷指令是新的還是舊的。也就是需要對比舊節點和新節點上的指令。比如新節點比舊節點上多了乙個指令。新節點上指令如下 newdirectives v test2 舊節點上指令如下 newdirectives 可以看到新節點上增加了乙個指令v test2,當我們遍歷發現v tes...
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...