Vue.js で ref した要素へのイベントリスナーの購読解除をわすれないためにミックスインにする

同僚がやってて、ナルホド～と思った。

import { Component, Vue } from 'vue-property-decorator'

@Component
export default class extends Vue {
  _removers: (() => any)[] = []

  listen(
    target: EventTarget,
    type: string,
    listener: EventListenerOrEventListenerObject | null,
    options?: boolean | AddEventListenerOptions
  ) {
    target.addEventListener(type, listener, options)
    this._removers.push(() => {
      target.removeEventListener(type, listener, options)
    })
  }

  destroyed() {
    this._removers.forEach(remove => remove())
  }
}

使い方

export default class extends Mixins(Listener) {
  mounted() {
    this.listen(this.$refs.button, 'click', () => { ... })
  }
}