...
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 childNo 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 justprops
scopedSlots
is now justslots
mocks
andstubs
have now moved under theglobal
field onmount
/render
mockQueries
works on both, but it is preferrable to put it under theglobal
field to align withmocks
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 tounmounted
The
beforeDestroy
lifecycle option has been renamed tobeforeUnmount
...
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.
...