Удалить прослушиватель событий окна при жизненном цикле директивы unbind Vue

Вызов bind функции создает новую функцию. Слушатели не удаляются, потому что функция, которую вы передаете removeEventListener, - это не та же функция, которую вы передали addEventListener.

Взаимодействие между хуками в директивах не очень-то просто. Официальная документация рекомендует использовать dataset элемента, хотя в данном случае это кажется неуклюжим:

https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments

Вы можете просто сохранить слушателей в элементе непосредственно как свойства, чтобы они были доступны в ловушке unbind.

В приведенном ниже коде используется несколько иной подход. Он использует массив для хранения всех элементов, которые в настоящее время привязаны к директиве. Слушатель на window регистрируется только один раз, независимо от того, сколько раз используется директива. Если директива в настоящее время не используется, этот слушатель удаляется:

let foxElements = []

function onClick () {
  console.log('click triggered')

  for (const entry of foxElements) {
    clickHandler(entry.el, entry.arg)
  }
}

function clickHandler (el, arg) {
  console.log('clicked', el, arg)
}

new Vue({
  el: '#app',
  
  data () {
    return {
      items: [0]
    }
  },

  directives: {
    fox: {
      inserted (el, binding) {
        console.log('inserted')
        
        if (foxElements.length === 0) {
          console.log('adding window listener')
          window.addEventListener('click', onClick)
        }

        foxElements.push({
          el,
          arg: binding.arg
        })
      },

      unbind (el, binding) {
        console.log('unbind')
      
        foxElements = foxElements.filter(element => element.el !== el)
        
        if (foxElements.length === 0) {
          console.log('removing window listener')
          window.removeEventListener('click', onClick)
        }
      }
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button @click="items.push(Math.floor(Math.random() * 1000))">Add</button>
  <hr>
  <button
    v-for="(item, index) in items"
    v-fox:example
    @click="items.splice(index, 1)"
  >Remove {{ item }}</button>
</div>

Однако все это предполагает, что директива - это даже правильный путь. Если вы можете просто сделать это на уровне компонентов, это может стать намного проще, потому что у вас есть экземпляр компонента, доступный для хранения вещей. Просто помните, что вызов bind создает новую функцию, поэтому вам нужно где-то сохранить ссылку на эту функцию, чтобы вы могли передать ее removeEventListener.

Просто для записей и чтобы помочь тем, кто проходит здесь, поскольку уже есть принятый ответ, что можно сделать в этом случае (по крайней мере, на Vue 3, не тестировалось на Vue 2), так это использовать binding.dir (который является ссылкой на собственный объект директивы), чтобы разместить функцию добавления прослушивателя событий в объект директивы и вернуть ее позже, когда возникнет необходимость удалить этот прослушиватель.

Один простой пример (не связанный с исходным вопросом) для привязки одного события фокуса:

export default {
  ...
  directives: {
    fox: {
      handleFocus: () => { /* a placeholder to rewrite later */ },
      mounted(el, binding) {
        binding.dir.handleFocus = () => { /* do whatever */ }
        el.addEventListener('focus', binding.dir.handleFocus);
      },
      beforeUnmount(el, binding) {
        el.removeEventListener('focus', binding.dir.handleFocus);
      }
    }
  }
  ...
}

Практический пример того, что я делаю с этим, в моем случае - иметь уведомление о фокусе / размытии для любого тега input или textarea. Я сделал это здесь, в проекте, построенном на Vue 3 с TypeScript.