Remove instance event API methods

[yyx990803]

Summary

Remove $on, $off and $once instance methods. Vue instances no longer implement the event emitter interface.

Rendered

[yyx990803]

This RFC is now in final comments stage. An RFC in final comments stage means that:

The core team has reviewed the feedback and reached consensus about the general direction of the RFC and believe that this RFC is a worthwhile addition to the framework.
Final comments stage does not mean the RFC's design details are final - we may still tweak the details as we implement it and discover new technical insights or constraints. It may even be further adjusted based on user feedback after it lands in an alpha/beta release.
If no major objections with solid supporting arguments have been presented after a week, the RFC will be merged and become an active RFC.

[bodograumann]

@yyx990803 Please update the link to the rendered rfc.

[blake-newman]

@bodograumann I have updated.

[muthu32]

Thanks for notifying about mitt.

[kouts]

Sorry if this is an obvious question, in Vue.js 2 you could extend a component and listen to events that the parent (super) component emitted.
Example:

// Popup component
{
  ...
  name: 'Popup', 
  methods: {
    afterOpen () {
      this.$emit('after-open');
    }
  }
  ...
}

// CustomPopup extends Popup
const CustomPopup = {
  extends: Popup,
  ...
  created () {
    this.$on('after-open', function () {
       // do something here...
    });
  }
  ...
};

Is there any way to achieve the same now that $on will be removed?
Do component instances now have to depend on an external library that emits these events?

[mika76]

@kouts I need to know this too 😊

[yyx990803]

@kouts @Mika86 yes, use a 3rd party lib. mitt is tiny.

[randriese]

I'm a bit confused about this RFC... Not by the proposal to remove the instance methods and I have no objections on using Mitt, however, how would this play with 0030-emits-option as that states the usage of $emit?

[sinkersan]

Hello.
In Vue 2 we have option to subscribe on lifecycle hook like on events. This gives us ability to write something like this

export default {
  mounted() {
    const picker = new Pickaday({
      // ...
    });

    this.$once("hook:beforeDestroy", () => {
      picker.destroy();
    })
  }
};

Since in Vue 3 $once and $on are deprecated. Do we have an option to migrate this code and keep it in event based way?

[Kocal]

That's a good question, what is the new way to listen lifecycle hooks? Or it is now impossible?
We are stuck for adding Vue 3 support to Sentry Vue integration (getsentry/sentry-javascript#2925).

Friendly ping @posva / @yyx990803 ❤️

Thanks!

[sqal]

@Kocal it's not documented but all lifecycle hooks receive component's instance as the second argument (source code) + there's getCurrentInstance api, so with that, you are able to do:

import { onMounted, onBeforeUnmount, getCurrentInstance, ref } from 'vue'

export default {
  name: 'Component',
  setup() {
    const instance = getCurrentInstance()
    const elRef = ref(null)

    onMounted(() => {
       const picker = new Pickaday(elRef.value, {});

      onBeforeUnmount(() => {
        picker.destroy()
      }, instance)
    })
  }
}

[Kocal]

Alright, thank you!