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', () => { ... })
  }
}

この記事は2020年2月16日にそめによって書かれました。