vue2升级vue3指南（二）—— 语法warning&error篇

本文总结了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'.

升级前：

before(app) {
  apiMocker(app, path.resolve('./mock/mock-server.js')) //  mock数据
},

升级后

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后失效了，从这方面切入检查即可。