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")); } } }
解决
看过了源码，我们再回到上面的bug，我们应该如何去解决呢？
1、事件解绑，重新绑定
我们在bind钩子中绑定了事件，当数据更新后，会运行update钩子，所以我们可以在update中先解绑再重新进行绑定。因为bind和update中的内容差不多，所以我们可以把bind和update合并为同一个函数，在用自定义指令的简写方法写成下面的代码：
Vue.directive('my-click', function(el, binding, vnode, oldVnode){ //点击事件的回调挂在在元素myClick属性上 el.myClick && el.removeEventListener('click', el.myClick); el.addEventListener('click', el.myClick = function(){ console.log(el, binding.value) }) })
可以看到，数据已经变成我们想要的数据了。
2、把binding挂在到元素上，更新数据后更新binding
我们已经知道了，造成问题的根本原因是初始化运行bind钩子的时候为元素绑定事件，事件内获取的数据是初始化的时候传递过来的数据，因为形成了闭包，那么我们不使用能引起闭包的数据，把数据存到某一个地方，然后去更新这个数据。
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 } })
这样也能达到我们想要的效果。
3、更新父元素
如果我们为父元素ul绑定一个变化的key值，这样，当数据变更的时候就会更新父元素，从而重新创建子元素，达到重新绑定指令的效果。
<ul :key="Date.now()"> <li v-for="(item,index) in arr" :key="index" v-my-click="item">{{item}}</li> </ul>
这样也能达到我们想要的效果。