溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關Vue.js源碼分析之自定義指令的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許注冊自定義指令。
官網介紹的比較抽象，顯得很高大上，我個人對自定義指令的理解是:當自定義指令作用在一些DOM元素或組件上時，該元素在初次渲染、插入到父節點、更新、解綁時可以執行一些特定的操作(鉤子函數()
自定義指令有兩種注冊方式，一種是全局注冊，使用Vue.directive(指令名，配置參數)注冊，注冊之后所有的Vue實例都可以使用，另一種是局部注冊，在創建Vue實例時通過directives屬性創建局部指令，局部自定義指令只能在當前Vue實例內使用
自定義指令可以綁定如下鉤子函數:
·bind ;只調用一次，元素渲染成DOM節點后，執行directives模塊的初始化工作時調用，在這里可以進行一次性的初始化設置。
·inserted ;被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。
·update ;所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。
·componentUpdated ;指令所在組件的 VNode 及其子 VNode 全部更新后調用。
·unbind ;只調用一次，指令與元素解綁時調用。
每個鉤子函數可以有四個參數，分別是el(對應的DOM節點引用)、binding(一些關于指令的擴展信息，是個對象)、vnode(該節點對應的虛擬VN哦的)和oldVnode(之前的VNode,僅在update和componentUpdated鉤子中可用)
bind鉤子函數執行的時候該DOM元素被渲染出來了，但是并沒有插入到父元素中，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="d"><input type="" name="" v-focus></div>
<script>
Vue.directive('focus', {
bind:function(el){console.log(el.parentElement);}, //打印父節點
inserted: function (el) {console.log(el.parentElement);el.focus()} //打印父節點，并將當前元素處于聚焦狀態
})
var app = new Vue({el:"#d"})
</script>
</body>
</html>輸出如下:
可以看到input元素自動獲得焦點了，控制臺輸出如下:
可以看到對于bind()鉤子來說，它的父節點是獲取不到的，因為Vue內部會在執行bind()鉤子后才會將當前元素插入到父元素的子節點里
在解析模板將DOM轉換成AST對象的時候會執行processAttrs()函數，如下:
function processAttrs (el) { //解析Vue的屬性
var list = el.attrsList;
var i, l, name, rawName, value, modifiers, isProp;
for (i = 0, l = list.length; i < l; i++) { //遍歷每個屬性
name = rawName = list[i].name;
value = list[i].value;
if (dirRE.test(name)) { //如果該屬性以v-、@或:開頭，表示這是Vue內部指令
// mark element as dynamic
el.hasBindings = true;
// modifiers
modifiers = parseModifiers(name);
if (modifiers) {
name = name.replace(modifierRE, '');
}
if (bindRE.test(name)) { // v-bind //bindRD等于/^:|^v-bind:/ ，即該屬性是v-bind指令時
/*v-bind的分支*/
} else if (onRE.test(name)) { // v-on
/*v-on的分支*/
} else { // normal directives
name = name.replace(dirRE, ''); //去掉指令前綴，比如v-show執行后等于show
// parse arg
var argMatch = name.match(argRE);
var arg = argMatch && argMatch[1];
if (arg) {
name = name.slice(0, -(arg.length + 1));
}
addDirective(el, name, rawName, value, arg, modifiers); //執行addDirective給el增加一個directives屬性
if ("development" !== 'production' && name === 'model') {
checkForAliasModel(el, value);
}
}
} else {
/*非Vue指令的分支*/
}
}
}addDirective會給AST對象上增加一個directives屬性保存指令信息，如下:
function addDirective ( //第6561行 指令相關，給el這個AST對象增加一個directives屬性，值為該指令的信息
el,
name,
rawName,
value,
arg,
modifiers
) {
(el.directives || (el.directives = [])).push({ name: name, rawName: rawName, value: value, arg: arg, modifiers: modifiers });
el.plain = false;
}例子里的p元素執行到這里時對應的AST對象如下:
接下來在generate生成rendre函數的時候，會執行genDirectives()函數，將AST轉換成一個render函數，如下:
with(this){return _c('div',{attrs:{"id":"d"}},[_c('input',{directives:[{name:"focus",rawName:"v-focus"}],attrs:{"type":"","name":""}})])}最后等渲染完成后會執行directives模塊的create鉤子函數,如下:
var directives = { //第6173行 directives模塊
create: updateDirectives, //創建DOM后的鉤子
update: updateDirectives,
destroy: function unbindDirectives (vnode) {
updateDirectives(vnode, emptyNode);
}
}
function updateDirectives (oldVnode, vnode) { //第6181行 oldVnode:舊的Vnode，更新時才有 vnode:新的VNode
if (oldVnode.data.directives || vnode.data.directives) {
_update(oldVnode, vnode);
}
}_updat 就是處理指令初始化和更新的，如下:
function _update (oldVnode, vnode) { //第6187行 初始化/更新指令
var isCreate = oldVnode === emptyNode; //是否為初始化
var isDestroy = vnode === emptyNode;
var oldDirs = normalizeDirectives$1(oldVnode.data.directives, oldVnode.context);
var newDirs = normalizeDirectives$1(vnode.data.directives, vnode.context); //調用normalizeDirectives$1()函數規范化參數
var dirsWithInsert = [];
var dirsWithPostpatch = [];
var key, oldDir, dir;
for (key in newDirs) { //遍歷newDirs
oldDir = oldDirs[key]; //oldVnode上的key指令信息
dir = newDirs[key]; //vnode上的key指令信息
if (!oldDir) { //如果oldDir不存在，即是新增指令
// new directive, bind
callHook$1(dir, 'bind', vnode, oldVnode); //調用callHook$1()函數，參數2為bind，即執行v-focus指令的bind函數
if (dir.def && dir.def.inserted) { //如果有定義了inserted鉤子函數
dirsWithInsert.push(dir); //則保存到dirsWithInsert數組里
}
} else {
// existing directive, update
dir.oldValue = oldDir.value;
callHook$1(dir, 'update', vnode, oldVnode);
if (dir.def && dir.def.componentUpdated) {
dirsWithPostpatch.push(dir);
}
}
}
if (dirsWithInsert.length) { //如果dirsWithInsert存在(即有綁定了inserted鉤子函數)
var callInsert = function () { //定義一個callInsert函數，該函數會執行dirsWithInsert里的每個函數
for (var i = 0; i < dirsWithInsert.length; i++) {
callHook$1(dirsWithInsert[i], 'inserted', vnode, oldVnode);
}
};
if (isCreate) { //如果是初始化
mergeVNodeHook(vnode, 'insert', callInsert); //則調用mergeVNodeHook()函數
} else {
callInsert();
}
}
if (dirsWithPostpatch.length) {
mergeVNodeHook(vnode, 'postpatch', function () {
for (var i = 0; i < dirsWithPostpatch.length; i++) {
callHook$1(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode);
}
});
}
if (!isCreate) {
for (key in oldDirs) {
if (!newDirs[key]) {
// no longer present, unbind
callHook$1(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy);
}
}
}
}writer by:大沙漠 QQ:22969969
對于bind鉤子函數來說是直接執行了，而對于inserted鉤子函數則是把函數保存到dirsWithInsert數組里，再定義了一個callInsert函數，該函數內部通過作用域訪問dirsWithInsert變量，并遍歷該變量依次執行每個inserted鉤子函數
mergeVNodeHook()鉤子函數的作用是把insert作為一個hooks屬性保存到對應的Vnode的data上面，當該Vnode插入到父節點后會調用該hooks，如下:
function mergeVNodeHook (def, hookKey, hook) { //第2074行 合并VNode的鉤子函數 def:一個VNode hookKey:(事件名，比如:insert) hook:回調函數
if (def instanceof VNode) { //如果def是一個VNode
def = def.data.hook || (def.data.hook = {}); //則將它重置為VNode.data.hook，如果VNode.data.hook不存在則初始化為一個空對象 注:普通節點VNode.data.hook是不存在的。
}
var invoker;
var oldHook = def[hookKey];
function wrappedHook () {
hook.apply(this, arguments); //先執行hook函數
// important: remove merged hook to ensure it's called only once
// and prevent memory leak
remove(invoker.fns, wrappedHook); //然后把wrappedHook從invoker.fns里remove掉，以且包只執行一次
}
if (isUndef(oldHook)) { //如果oldHook不存在，即之前沒有定義hookKey這個鉤子函數
// no existing hook
invoker = createFnInvoker([wrappedHook]); //直接調用createFnInvoker()返回一個閉包函數，參數為執行的回調函數
} else {
/* istanbul ignore if */
if (isDef(oldHook.fns) && isTrue(oldHook.merged)) {
// already a merged invoker
invoker = oldHook;
invoker.fns.push(wrappedHook);
} else {
// existing plain hook
invoker = createFnInvoker([oldHook, wrappedHook]);
}
}
invoker.merged = true;
def[hookKey] = invoker; //設置def的hookKey屬性指向新的invoker
}createFnInvoker就是v-on指令對應的那個函數，用到了同一個API，執行完后，我們就把invoker插入到input對應的VNode.data.hook里了，如下:
最后等到該VNode插入到父節點后就會執行invokeCreateHooks()函數，該函數會遍歷VNode.hook.insert，依次執行每個函數，也就執行到我們自定義定義的inserted鉤子函數了。
感謝各位的閱讀！關于“Vue.js源碼分析之自定義指令的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
