methodName ：binding.expression，查看自定义指令的文档可以知道， binding.expression 的值是字符串形式的指令表达式。例如有 <div v-my-directive="1 + 1"></div> ，则 binding.expression 的值为 1 + 1
bindingFn ： binding.value，指令的绑定值，还是上面的例子，则 binding.value 的值是 2 （1 + 1等于2），即 指令的值为js表达式的情况下， **binding.expresssion** 为表达式本身，是一个字符串，而 **binding.value** 是该表达式的值。
接着我们看下 update 钩子：
update(el, binding, vnode) { el[ctx].documentHandler = createDocumentHandler(el, binding, vnode); el[ctx].methodName = binding.expression; el[ctx].bindingFn = binding.value; }
可以看到update钩子的内容很简单，就是当组件更新的时候，更新 绑定元素 el 的特性 ctx 中的值。
再接着我们看看最后一个钩子 unbind :
unbind(el) { let len = nodeList.length; for (let i = 0; i < len; i++) { if (nodeList[i][ctx].id === el[ctx].id) { nodeList.splice(i, 1); break; } } delete el[ctx]; }
这个钩子也很简单，就是当 clickoutside 指令与元素el解绑的时候，遍历 nodeList ，通过ctx特性上的id找到 nodeList 中存储的当前解绑元素el，将它从nodeList中删除，并且删除el上的ctx特性。
以上就是clickoutside指令配置对象中做的所有操作，总结起来就是：
当指令与元素绑定以及组件更新的时候，搜集并设置绑定元素的ctx特性，同时将绑定元素添加到nodeList当中去，当指令与元素解绑的时候，删除nodeList中存储的对应的绑定元素，并将之前设置在绑定元素上之前设置的ctx特性删除掉。
前面说过，给页面绑定的mouseup事件回调中，会遍历nodeList，分别执行搜集起来的每一个绑定元素el上的ctx特性中的 documentHandler 函数。而该函数是通过 createDocumentHandler 函数生成的，让我们看看这个函数都做了什么。
function createDocumentHandler(el, binding, vnode) { return function(mouseup = {}, mousedown = {}) { if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target || (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target)))) return; if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) { vnode.context[el[ctx].methodName](); } else { el[ctx].bindingFn && el[ctx].bindingFn(); } }; }
可以看到，这个函数利用了闭包将传入的参数缓存起来，然后返回一个函数。在这个返回的函数中，会进行一系列判断，首先在第一个if里面，判断了：
vnode.context 是否存在，不存在退出
mouseup.target 是否存在，不存在退出
mousedown.target 是否存在，不存在退出
绑定对象el是否包含 mouseup.target/mousedown.target 子节点，如果包含说明点击的是绑定元素的内部，则不执行 clickoutside 指令内容
绑定对象el是否等于 mouseup.target ，等于说明点击的就是绑定元素自身，也不执行 clickoutside 指令内容
最后 vnode.context.popperElm 这部分内容则是 : 判断是否点击在下拉菜单的上，如果是，也是没有点击在绑定元素外部，不执行clickoutside指令内容
如图，如果点击在红色区域内，则全部不触发 clickoutside 指令的逻辑。
如果以上条件全部符合，则判断闭包缓存起来的值，如果 methodName 存在则执行这个方法，如果不存在则执行 bindingFn 。例如：
<template> <div v-clickoutside="handleClose"></div> </template> <script> export default { data(){ return { visible: false }; }, methods: { handleClose(){ this.visible = false; } } } </script>
在这个例子中， methodName 或者 bindingFn 就是通过指令传入的 handleClose 方法。执行该方法，就可以执行 clickoutside 指令的逻辑了
以上就是 documentHandler 方法的生成以及内部逻辑。通过这个方法和之前的分析，我们就可以知道，当页面绑 mouseup 事件触发的时候，会遍历 nodeList ，依次执行每一个绑定元素el的ctx特性上的 documentHandler 方法。而在这个方法内部可以访问到指令传入的表达式，在进行一系列判断之后会执行该表达式，从而达到点击目标元素外部执行给定逻辑的目的，而这个给定逻辑是通过自定义指令的值，传到绑定元素el的ctx特性上的。