vuejs：使用v-show显示元素后

Question

使用v-show显示元素后，我指令中的回调函数立即被调用

<div 
  v-show="visible"
  v-click-outside="log"
  class="box">
  YEAH, you can see me now
</div>

指令

let clickHandler

const clickOutside = {
  bind: function(el, binding, vnode) {
    clickHandler = e => {
      if (!el.contains(e.target)) {
        binding.value(e)
      }
    }
  window.addEventListener('click', clickHandler)
},
unbind: function(el, binding) {
    window.removeEventListener('click', clickHandler)
  }
}

export default clickOutside

如何预防？

实时demo

好吧，如果我将addEventlistener包装在setTimeout中，则可以正常工作，但这是解决问题的正确方法吗？因为等待1秒对我来说似乎很奇怪...

setTimeout(()=>{
  window.addEventListener("click", clickHandler);
}, 1000)