本文总结了vue2升级vue3可能会遇到的语法警告和错误,如果想知道怎样升级,可以查看我的上一篇文章:vue2升级vue3指南(一)—— 环境准备和构建篇
Warning
1、deep
/deep/和::v-deep的写法都被vue3弃用,需要改为:deep()。
升级前:
/deep/.xxxxx {}
升级后:
:deep(.xxxxx) {}
2、.sync
.sync modifier for v-bind has been removed. Use v-model with argument instead. v-bind:value.sync should be changed to v-model:value.
升级前:
<CustomerComponent :value.sync="value"></CustomerComponent>
升级后
<CustomerComponent v-model:value="value"></CustomerComponent>
Error
1、 this.$on、$off 和 $once
$on、$off 和 $once 实例方法已被移除,组件实例不再实现事件触发接口,不过,$emit 仍然包含于现有的 API 中,因为它用于触发由父组件声明式添加的事件处理函数。
解决方案有三种:(1)换一种实现逻辑,不使用$on、$off 和 $once,vue3。Vue3 官方文档是这样说的:“在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案,但从长期来看,它维护起来总是令人头疼。”。(2)重新封装一个全局this.$on、$off 和 $once。(3)使用外部的、实现了事件触发器接口的库,例如 mitt或 tiny-emitter。PS:(1)、(3)两种方案可以参考官方文档:vue3-事件总线,文档中给出了不使用事件总线的替代方案,以及替代vue2 $on、$off 和 $once等事件触发接口库。
2、mock
升级vue3和webpack5后,vue.config.js中webpack的配置报错:options has an unknown property 'before'.
升级前:
const path = require('path')const apiMocker = require('mocker-api')...before(app) { apiMocker(app, path.resolve('./mock/mock-server.js')) // mock数据},
升级后
const path = require('path')const apiMocker = require('mocker-api')...onBeforeSetupMiddleware(devServer) { apiMocker(devServer.app, path.resolve('./mock/mock-server.js'))}
无Error和Warning但不响应
1、keyup
升级前:
@keyup.13="enterEventFun"
升级后
@keyup.enter="enterEventFun"
2、vant2升级vant3部分组件事件不响应
vant3和vue官方提供的迁移构建版本兼容vue2模式有些冲突,如果需要vant3组件表现正常,将@vue/compat的相关引用移除。
3、Vant2升级为Vant3后,部分组件样式异常
异常组件为:Toast,Dialog,Notify 和 ImagePreview。
Vant3 中以上组件是以函数的形式提供的,在使用函数组件时,需要手动引入样式。// Toastimport { Toast } from 'vant';import 'vant/es/toast/style';// Dialogimport { Dialog } from 'vant';import 'vant/es/dialog/style';// Notifyimport { Notify } from 'vant';import 'vant/es/notify/style';// ImagePreviewimport { ImagePreview } from 'vant';import 'vant/es/image-preview/style';
4、Vant2升级为Vant3后,部分组件原有的样式覆盖未生效
vant3的部分组件的部分样式名有改名,如van-tab__pane-wrapper改为van-tab__panel-wrapper,部分样式取消,如van-button--info。所以,如果之前针对vant2编写的样式覆盖的代码在升级为vant3后失效了,从这方面切入检查即可。