Is there any opportunities to share own methods in a custom directive around bind/unbind/update?

For example, I would add a event listener when bind and remove it when unbind. So I wrote:

Vue.directive('xxx', {
  bind: function () {
    this.vm.handler = function () {...};
    this.el.addEventListener('click', this.vm.handler);
  },
  unbind: function () {
    this.el.removeEventListener('click', this.vm.handler);
    delete this.vm.handler;
  }
});

But the handler is exposed out to vm. Is there any better way?

Thanks.

[HcySunYang]

@jasonbodily @nevcos Do not know if this can meet your need?

Vue.directive('xxx', {
  bind: function (el) {
    const handler = () => { ... }
    el.addEventListener('someEvent', handler)
    el.$destroy = () => el.removeEventListener('someEvent', handler)
  },
  unbind: function (el) {
    el.$destroy()
  }
});

Simply use the el parameter and define the destroy function in the bind hook

[lazarljubenovic]

The solution proposed by @HcySunYang looks like some kind of hack. $destroy is misleading as it seems like it’s something vue-related. It’s in fact an arbitrary key, using el.i_am_a_banana would work as well.

@yyx990803 Can you confirm that this is the intended correct way of achieving this? Or maybe we should not remove event listeners at all? Does Vue’s DOM management guarantee that there will be no memory leak issues?