登录/注册
tjk
339
占位
0
占位
0
浏览量
占位
粉丝
占位
关注
vue2升级vue3指南(二)—— 语法warning&error篇
tjk
2022-08-04 17:38:16 2022-08-04
23
0

本文总结了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 中以上组件是以函数的形式提供的,在使用函数组件时,需要手动引入样式。

// Toast
import { Toast } from 'vant';
import 'vant/es/toast/style';
// Dialog
import { Dialog } from 'vant';
import 'vant/es/dialog/style';
// Notify
import { Notify } from 'vant';
import 'vant/es/notify/style';
// ImagePreview
import { 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后失效了,从这方面切入检查即可。

暂无评论