Offer a .$listen() helper to wrap .$on() .$off() calls during the instance lifespan

What problem does this feature solve?

I often add several event listeners to various things in my created() function, and then having to remove them in the beforeDestroy function.

This mixin helps a ton in every case for these cases, so that having to keep track of event listeners for a specific instance are cleaned up correctly.

Vue.mixin({
    methods: {
        listen: function listen(source, event, fn) {
            this.listeningEvents = this.listeningEvents || [];
            this.listeningEvents.push(() => {
                source.$off(event, fn);
            });
            source.$on(event, fn);
        },
    },
    beforeDestroy: function beforeDestroy() {
        (this.listeningEvents || []).forEach(fn => fn());
    },
});

if this could be built in (bonus points if (source.$on || source.on)() is used for commonly used eventemitters!) then it should save a lot of time and ease of use for tracking weird bugs due to left over bound events.

What does the proposed API look like?

On a Vue instance, this.$listen(otherVueInstance, 'event_name', (event) => {});.

No need to worry about cleaning up the event when the instance is destroyed.

[posva]

That fiddle is really different, you’re attaching events to another source, they’re not linked to the vue instance you’re calling the $on function in any way, so it’s normal for you to clean them up: https://jsfiddle.net/posva/71rfnyq8/

To make it clear: listeners setup with this.$on are cleaned up when the instance is destroyed. So doing this.$on without this.$off in the destroyed event should be ok (no memory leaks, etc)

A note about $destroy: https://vuejs.org/v2/api/#vm-destroy

[posva]

I think it should go here: https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/migration.md#dispatch-and-broadcast-replaced