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