vue2升級vue3指南（二）—— 語法warning&error篇

2022 年 7 月 25 日
筆記
Vant, VUE, Vue-CLI, webpack

本文總結了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後失效了，從這方面切入檢查即可。

Tags: Vant VUE Vue-CLI webpack