Things you should know when upgrading from Vue2 to Vue3

Hidden danger

• The way Vue3 implements data responsiveness is that Proxyit exists for versions below IE11兼容性问题
• A lot of refactoring has been done at the bottom of the framework, and many APIs have been added and discarded. These places need to be modified to ensure the operation of the program
• Dependencies also need to be upgraded, including vue-related plug-ins and third-party plug-ins

upgrade steps

pass工具+手动

step one:

First upgrade the Vue2 framework to Vue3 as a whole. Since Vue3 is also compatible Option Api, the code structure can be adjusted temporarily, and then changed to the officially recommended one.Composition Api

Step two:

Upgrade Vue-related dependencies,Vue/Vuex/Vue-router/Vue 编译工具

Step three:

Modify and replace the API and syntax that are no longer supported in Vue3. For example, the filter is no longer supported, and the usage of v-model has also changed.

Step four:

Upgrade dependencies such as third-party component libraries and plug-ins to versions that adapt to Vue3

Step five:

After ensuring that the project code syntax is compiled correctly, you need to check whether the business logic in the code is correct to ensure that the project can run completely.

Step six:

Use TypeScript to refactor JS code. TypeScript has more static type checking than JavaScript, and also adds some new syntax, which is the icing on the cake for the project. But this step will be time-consuming (because it is equivalent to modifying the JS code once), but JS and TS can exist in the project at the same time, so they can be replaced gradually.

upgrade tools

Through the open source tool gogocode documentation , the conversion of the above steps 1, 2, and 3 can be performed.

ps : There are many unknowns in the tool transformation code, and some complex business codes (such as form linkage, rule verification, etc.) may affect the original logic, and need to be manually compared and tested one by one.

Changes needed to upgrade

1. Global API

• The global Vue API has changed to use the application instance
• The global and internal APIs have been refactored to supporttree-shake

2. Template directives

• v-modelThe usage on the component has been changed to replacev-bind.sync
• <template v-for>Usage on and non- v-fornodes keyhas changed
• The precedence of v-ifand has changed ( greater than )v-forv-ifv-for
• v-bind=“object”sort sensitive now
• v-on:event.nativemodifier removed
• v-forrefThe `ref array is no longer registered in

3. Components

• Functional components can only be created using ordinary functions
• functional attributeDeprecated in the <template>and component options of single-file components (SFC)functional
• Async components now need to be created using defineAsyncComponentthe method
• Component events now need to be declared in emitsoptions

4. Render function

• Render function API changes
• $scopedSlots propertyremoved, all slots are exposed as functions $slotsvia
• $listenerswas removed or integrated into$attrs
• $attrsnow contains classandstyle attribute

5. Custom elements

• Custom element detection is now performed at template compile time
• is attributeSpecial usage is strictly limited to reserved <component>tags

6. Other minor changes

• destroyedLifecycle options were renamed tounmounted
• beforeDestroyLifecycle options were renamed tobeforeUnmount
• default propFactory functions no longer have access to this context
• The API for custom directives has been changed to align with the component lifecycle and binding.expressionhas been removed
• dataOptions should always be declared as a function
• mixinThe option from datais now shallow merge
• AttributeEnforcement policy changed
• Some transitional s classwere renamed
• <TransitionGroup>wrapper elements are no longer rendered by default
• When listening to an array, the callback will only fire when the array is replaced, if you need to fire on change, you must specify the deep option
• Tags without special directives (v-if/else-if/else, v-for or v-slot) are <template>now treated as normal elements and will render
• native <template>element , rather than rendering its inner content.
• A mounted application does not replace the element it is mounted on
• hook:The event prefix of the lifecycle is changed tovnode-

7. Removed APIs

• keyCodeSupport as v-onmodifier
• on、offand $onceinstance methods
• filter
• inline templateattribute
• $childrenexampleproperty
• propsDataoptions
• $destroyinstance method. Users should no longer manually manage the lifecycle of individual Vue components.
• Global functions setand deleteand instance methods $setand $delete. Proxy-based change detection no longer requires them
• The frameworks of Element and Element Plus have also been modified. Please refer to the Element Plus documentation to adjust the usage of components.

reference documents

Vue2 large-scale project upgrade Vue3 detailed experience summary