In order to embrace change and keep up with the trend of The Times, THE VUE2 project was upgraded to VUe3. During the upgrade process, many pits were found. Maybe the problem is very simple, but when thinking falls into the wrong area, it will cause us a lot of trouble. Therefore, the pit encountered in this upgrade is summarized and sorted out, hoping to provide certain help to partners with the same needs.

Without further ado, let’s get to the point

What are the changes from VUE2 to VUE3

About this part I believe there are a lot of students on the Internet have sorted out, and sorted out much better than ME, so I will not repeat, I have seen two think very good address, we can check

Vue official document

# Vue3.0 new features and use experience summary

Next is the pit I met, when the investigation is completed, there is a kind of like a toad crawling feet, do not bite it diaphragm people’s feeling……

Antd 3

I believe that many people like me, when upgrading VUe2, at the same time, will use the internal package to upgrade. This time, I upgraded ant-design-vue from 1 to 3.

There were some problems that I initially thought were caused by VUe3, but were actually caused by an Ant upgrade.

1. Antd3 removes formModel component

During the migration, you will find that the a-form-Model used by the original project is not recognized because ANT3 removes this component and uses all A-Forms. Binding is in the form of a V-Model.

2. Antd3 removes the Icon component

During the migration, the A-icon used by the original project was not recognized because the icon call method in ANT3 had been adjusted and there were no exported Icon components in Ant-Design-Vue.

// New call method <template> <message-outlined :style="{fontSize: '16px', color: outline: statements '#08c'}" /> </template> <script> import { MessageOutlined } from '@ant-design/icons-vue'; import { defineComponent } from 'vue'; export default defineComponent({ components: { MessageOutlined, }, }); </script>Copy the code

3. Style issues

The most inevitable problem in an upgrade, of course, is the problem of style confusion. After investigation, it was found that ant-modal-body and ant-topics-body in ANT3 have padding by default, but in the previous version, these two have no padding property, so the style needs to be rewritten

4. Prop properties

Ant3’s form property prop has been deprecated and is now name. In addition, if you want to stop data collection, you can do the following

// The component library provides an 'a-form-item-rest' component, which prevents data collection. You can put form items in this component that do not require collection validation, without generating additional DOM nodes. <a-form-item> <a-input name="a"> </a-input> <a-form-item-rest> <a-input name="b"> </a-input> </a-form-item-rest> </a-form-item>Copy the code

Vue-i18n upgrade problem

I believe many students have been used to using ￥t in template and this.$t in JS when using VUe2

However, when we upgraded to Vue3, this method was no longer applicable. Template was used in the same way, but js was used in a very different way.

If you want to useI18n in js in vue3, you need to obtain t object through hook: useI18n provided by vue-i18n, and then call it through t

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const label = t('test')
Copy the code

VueI18n Official document

Swiper upgrade problem

Swiper is used in the project. The original swiper can be used only by injecting swiper, but after upgrading Vue3, it is not so easy to use swiper again. You need to write as follows to call it normally

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/vue'; Mousewheel SwiperCore. Use ([Navigation, Pagination, Scrollbar, A11y, Autoplay, Mousewheel]); export default defineComponent({ components:{Swiper, SwiperSlide} })Copy the code

Note that the new swiper properties cannot be configured through swiperOptions. You need to expand the configuration to take effect.

# How to use Swiper6 in vue to solve Mousewheel failure

# Vue project using swiper encountered pits

slideTo

When I upgrade vue3, slideTo is not a funciton. SlideTo is not a funciton. SlideTo is not funciton

In fact, I did not find out how to bind for a long time, and then I used a method to solve the problem. In swiper’s component, the binding assignment is triggered by onSwiper instead of ref, so I assign the swiper instance to the vue date, which can be called directly later

Vue-qrcode does not support VUE3

Use qrcode. Vue

Vue generates two-dimensional code plug-in vuE-qrCode

Miscellaneous questions

  • Ant Design Vue input box is not bound to a value solution

  • In VUe3, event distribution is divided into emit from context and emit from eventBus, which are the differences between parent-child propagation and multiple propagation respectively

  • “Validate” in ANTd3 does not have a callback, so it is written like this

const valid = await (ruleForm.value as any)? .validate()Copy the code

  • If ref or computed is used in JS, you need to add a. Value after that, and you do not need to add a. Value after returning to the template

  • Vue3 removes the.sync modifier and binds it to v-modal: variable names if you want to use it

conclusion

I mainly used React before, and this time I learned various ways to write Vue. The above are some of the problems I encountered in the learning process, which may be very simple, but for those who don’t know, it is really difficult to find solutions. I also googled the solutions during the upgrade process. Maybe not the right way, but it did solve the problem I was facing.

Sort out as their own summary, also hope to help people in need ~