Vue - The Road to Enterprise/

...

/

Migration Guide

Migration Guide

Learn what steps we'll need to take to make our migration process straightforward and what to use instead of using $on, $off, $once, and filters.

We'll cover the following...

Even if we’re not planning to migrate our Vue 2 project to Vue 3 immediately, there are a few things that we can already do to make the migration process more straightforward.

These are:

  • Avoid using $on, $off, and $once
  • Avoid using filters
  • Pass classes explicitly via props
  • Use the data option
  • Use the emits option
  • Avoid functional components
  • Avoid keyCodes

Avoid the $on, $off, and $once methods

Vue 2

Vue has its own event system, and in Vue 2, components had access to the $on, $off, and $oncemethods to listen for events emitted on components. These methods were usually used for the event bus pattern where a root or new empty Vue instance was used for communication between components and to listen for lifecycle hooks like so:

Press + to interact
created() {
    window.addEventListener('scroll', this.onScroll)
    this.$on('hook:beforeDestroy', () => {
        window.removeEventListener('scroll', this.onScroll)
    })
}

Let’s run the following code and look at the event bus example in Vue 2:

Note: The code ...