let Opt = {
 bind:function(el,binding,vnode){ },
 inserted:function(el,binding,vnode){ },
 update:function(el,binding,vnode){ },
 componentUpdated:function(el,binding,vnode){ },
 unbind:function(el,binding,vnode){ },
}

Vue.directive('demo', Opt)

Directives: {
 Demo:  Opt
}

let Opt = function(el,binding,vnode){ }

Vue.directive('my-click',{
 bind:function(el, binding, vnode, oldVnode){
  el.addEventListener('click',function(){
   console.log(el, binding.value)
  })
 }
})

<ul>
 <li v-for="(item,index) in arr" :key="index" v-my-click="item">{{item}}</li>
</ul>

function _update(oldVnode, vnode) {
 //判斷舊節(jié)點(diǎn)是不是空節(jié)點(diǎn)，是的話表示新建/初始化組件
 var isCreate = oldVnode === emptyNode;
 //判斷新節(jié)點(diǎn)是不是空節(jié)點(diǎn)，是的話表示銷毀組件
 var isDestroy = vnode === emptyNode;
 //獲取舊節(jié)點(diǎn)上的所有自定義指令
 var oldDirs = normalizeDirectives$1(oldVnode.data.directives, oldVnode.context);
 //獲取新節(jié)點(diǎn)上的所有自定義指令
 var newDirs = normalizeDirectives$1(vnode.data.directives, vnode.context);

 //保存inserted鉤子函數(shù)
 var dirsWithInsert = [];
 //保存componentUpdated鉤子函數(shù)
 var dirsWithPostpatch = [];

 var key, oldDir, dir;
 
 //這里先說(shuō)下callHook$1函數(shù)的作用
 //callHook$1有五個(gè)參數(shù)，第一個(gè)參數(shù)是指令對(duì)象，第二個(gè)參數(shù)是鉤子函數(shù)名稱，第三個(gè)參數(shù)新節(jié)點(diǎn)，
 //第四個(gè)參數(shù)是舊節(jié)點(diǎn)，第五個(gè)參數(shù)是是否為注銷組件，默認(rèn)為undefined，只在組件注銷時(shí)使用
 //在這個(gè)函數(shù)里，會(huì)根據(jù)我們傳遞的鉤子函數(shù)名稱，運(yùn)行我們自定義組件時(shí)，所聲明的鉤子函數(shù)，
 
 //遍歷所有新節(jié)點(diǎn)上的自定義指令
 for(key in newDirs) {
  oldDir = oldDirs[key];
  dir = newDirs[key];
  //如果舊節(jié)點(diǎn)中沒(méi)有對(duì)應(yīng)的指令，一般都是初始化的時(shí)候運(yùn)行
  if(!oldDir) {
   //對(duì)該節(jié)點(diǎn)執(zhí)行指令的bind鉤子函數(shù)
   callHook$1(dir, 'bind', vnode, oldVnode);
   //dir.def是我們所定義的指令的五個(gè)鉤子函數(shù)的集合
   //如果我們的指令中存在inserted鉤子函數(shù)
   if(dir.def && dir.def.inserted) {
    //把該指令存入dirsWithInsert中
    dirsWithInsert.push(dir);
   }
  } else { 
   //如果舊節(jié)點(diǎn)中有對(duì)應(yīng)的指令，一般都是組件更新的時(shí)候運(yùn)行
   //那么這里進(jìn)行更新操作，運(yùn)行update鉤子（如果有的話）
   //將舊值保存下來(lái)，供其他地方使用（僅在 update 和 componentUpdated 鉤子中可用）
   dir.oldValue = oldDir.value;
   //對(duì)該節(jié)點(diǎn)執(zhí)行指令的update鉤子函數(shù)
   callHook$1(dir, 'update', vnode, oldVnode);
   //dir.def是我們所定義的指令的五個(gè)鉤子函數(shù)的集合
   //如果我們的指令中存在componentUpdated鉤子函數(shù)
   if(dir.def && dir.def.componentUpdated) {
    //把該指令存入dirsWithPostpatch中
    dirsWithPostpatch.push(dir);
   }
  }
 }
 
 //我們先來(lái)簡(jiǎn)單講下mergeVNodeHook的作用
 //mergeVNodeHook有三個(gè)參數(shù)，第一個(gè)參數(shù)是vnode節(jié)點(diǎn)，第二個(gè)參數(shù)是key值，第三個(gè)參數(shù)是回函數(shù)
 //mergeVNodeHook會(huì)先用一個(gè)函數(shù)wrappedHook重新封裝回調(diào)，在這個(gè)函數(shù)里運(yùn)行回調(diào)函數(shù)
 //如果該節(jié)點(diǎn)沒(méi)有這個(gè)key屬性，會(huì)新增一個(gè)key屬性，值為一個(gè)數(shù)組，數(shù)組中包含上面說(shuō)的函數(shù)wrappedHook
 //如果該節(jié)點(diǎn)有這個(gè)key屬性，會(huì)把函數(shù)wrappedHook追加到數(shù)組中
 
 //如果dirsWithInsert的長(zhǎng)度不為0，也就是在初始化的時(shí)候，且至少有一個(gè)指令中有inserted鉤子函數(shù)
 if(dirsWithInsert.length) {
  //封裝回調(diào)函數(shù)
  var callInsert = function() {
   //遍歷所有指令的inserted鉤子
   for(var i = 0; i < dirsWithInsert.length; i++) {
    //對(duì)節(jié)點(diǎn)執(zhí)行指令的inserted鉤子函數(shù)
    callHook$1(dirsWithInsert[i], 'inserted', vnode, oldVnode);
   }
  };
  if(isCreate) {
   //如果是新建/初始化組件，使用mergeVNodeHook綁定insert屬性，等待后面調(diào)用。
   mergeVNodeHook(vnode, 'insert', callInsert);
  } else {
   //如果是更新組件，直接調(diào)用函數(shù)，遍歷inserted鉤子
   callInsert();
  }
 }
 
 //如果dirsWithPostpatch的長(zhǎng)度不為0，也就是在組件更新的時(shí)候，且至少有一個(gè)指令中有componentUpdated鉤子函數(shù)
 if(dirsWithPostpatch.length) {
  //使用mergeVNodeHook綁定postpatch屬性，等待后面子組建全部更新完成調(diào)用。
  mergeVNodeHook(vnode, 'postpatch', function() {
   for(var i = 0; i < dirsWithPostpatch.length; i++) {
    //對(duì)節(jié)點(diǎn)執(zhí)行指令的componentUpdated鉤子函數(shù)
    callHook$1(dirsWithPostpatch[i], 'componentUpdated', vnode, oldVnode);
   }
  });
 }
 
 //如果不是新建/初始化組件，也就是說(shuō)是更新組件
 if(!isCreate) {
  //遍歷舊節(jié)點(diǎn)中的指令
  for(key in oldDirs) {
   //如果新節(jié)點(diǎn)中沒(méi)有這個(gè)指令（舊節(jié)點(diǎn)中有，新節(jié)點(diǎn)沒(méi)有）
   if(!newDirs[key]) {
    //從舊節(jié)點(diǎn)中解綁，isDestroy表示組件是不是注銷了
    //對(duì)舊節(jié)點(diǎn)執(zhí)行指令的unbind鉤子函數(shù)
    callHook$1(oldDirs[key], 'unbind', oldVnode, oldVnode, isDestroy);
   }
  }
 }
}

function callHook$1(dir, hook, vnode, oldVnode, isDestroy) {
 var fn = dir.def && dir.def[hook];
 if(fn) {
  try {
   fn(vnode.elm, dir, vnode, oldVnode, isDestroy);
  } catch(e) {
   handleError(e, vnode.context, ("directive " + (dir.name) + " " + hook + " hook"));
  }
 }
}

Vue.directive('my-click', function(el, binding, vnode, oldVnode){
 //點(diǎn)擊事件的回調(diào)掛在在元素myClick屬性上
 el.myClick && el.removeEventListener('click', el.myClick);
 el.addEventListener('click', el.myClick = function(){
  console.log(el, binding.value)
 })
})

Vue.directive('my-click',{
 bind: function(el, binding, vnode, oldVnode){
  el.binding = binding
  el.addEventListener('click', function(){
   var binding = this.binding
   console.log(this, binding.value)
  })
 },
 update: function(el, binding, vnode, oldVnode){
  el.binding = binding
 }
})

<ul :key="Date.now()">
 <li v-for="(item,index) in arr" :key="index" v-my-click="item">{{item}}</li>
</ul>