Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

You can see the full list of breaking changes in the Vue documentation, but some of the most impactful are summarised below.

It may also be useful to familiarise yourself with the Vue 3 documentation.

Event handling (eslinted)

...

This has changed a lot between versions. If you’re using render functions, vnodes, or h(), expect to rework your code.

:key (eslinted)

...

  • When using with <template v-for>, the :key should be placed on the template tag, instead of the child

  • No longer necessary on v-if/else/else-if branches

v-bind object order

When using v-bind="someObject", individual props will now only take precedence if they come before the v-bind. More info

...

  • propsData is now just props

  • scopedSlots is now just slots

  • mocks and stubs have now moved under the global field on mount/render

  • mockQueries works on both, but it is preferrable to put it under the global field to align with mocks

  • wrapper.emitted() now includes native events. It is recommended to just ask for the event you are looking for with e.g. wrapper.emitted('submit')

Lifecycle methods (eslinted)

  • The destroyed lifecycle option has been renamed to unmounted

  • The beforeDestroy lifecycle option has been renamed to beforeUnmount

...

Instead of mutating the prop, copy it and change the copy. produce() from tui/immutable can help with this.

$children

Accessing child components via $children is no longer possible$children has been removed in Vue 3.

Vue namespaced methods

Vue.set and Vue.delete no longer exist -- they are no longer necessary with the proxy-based reactivity approach in Vue 3.

...