vue2 項目遷移 vue3,必須適配的部分

以下列舉遷移到 vue3,必須適配的幾個點,vue2 項目才能正常運行在 vue3 上。更多查看完整的非兼容特性列表

  • main.js

    • 創(chuàng)建應(yīng)用實例

      // 之前 - Vue 2
      import Vue from 'vue'
      import App from './App'
      Vue.config.productionTip = false    // vue3 不再需要
      App.mpType = 'app'    // vue3 不再需要
      const app = new Vue({
      ...App
      })
      app.$mount()
      
      // 之后 - Vue 3
      import App from './App'
      import { createSSRApp } from 'vue'
      export function createApp() {
         const app = createSSRApp(App)
         return {
            app
         }
      }
      
    • 全局屬性,例如:全局網(wǎng)絡(luò)請求

    // 之前 - Vue 2
    Vue.prototype.$http = () => {};
    
    // 之后 - Vue 3
    const app = createApp({});
    app.config.globalProperties.$http = () => {};
    
    • 插件使用,例如:使用 vuex 的 store
    // 之前 - Vue 2
    import store from "./store";
    Vue.prototype.$store = store;
    
    // 之后 - Vue 3
    import store from "./store";
    const app = createApp(App);
    app.use(store);
    
  • 項目根目錄必需創(chuàng)建 index.html 文件,粘貼復制如下內(nèi)容:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <title></title>
        <!--preload-links-->
        <!--app-context-->
      </head>
      <body>
        <div id="app"><!--app-html--></div>
        <script type="module" src="/main.js"></script>
      </body>
    </html>
    
  • 只支持使用 ES6 模塊規(guī)范,commonJS 需改為 ES6 模塊規(guī)范

    • 導入模塊, 例如:

      // 之前 - Vue 2, 使用 commonJS
      var utils = require("../../../common/util.js");
      
      // 之后 - Vue 3, 只支持 ES6 模塊
      import utils from "../../../common/util.js";
      
    • 模塊導出,例如:

      // 之前 - Vue 2, 依賴如使用 commonJS 方式導出
      module.exports.X = X;
      
      // 之后 - Vue 3, 可手動改為 ES6 導出
      export default { X };
      
  • vuex 用法

    // 之前 - Vue 2
      import Vue from 'vue'
      import Vuex from 'vuex'
      Vue.use(Vuex)
      const store = new Vuex.Store({
          state: {}
      })
      export default store
    
    // 之后 - Vue 3
      import { createStore } from 'vuex'
      const store = createStore({
          state: {}
      })
      export default store
    
  • 避免在同一元素上同時使用 v-if 與 v-for

    而 Vue3 中,v-if 總是優(yōu)先于 v-for 生效。以上寫法將會在 Vue3 中與預期不符合,由于語法上存在歧義,建議避免在同一元素上同時使用兩者(更多)。

  • 生命周期的適配

    在Vue3中組件卸載的生命周期被重新命名

    • destroyed 修改為 unmounted
    • beforeDestroy 修改為 beforeUnmount
  • 事件的適配

    Vue3 現(xiàn)在提供了一個emits選項,類似于現(xiàn)有props選項。此選項可用于定義組件可以向其父對象發(fā)出的事件, 更多

    強烈建議使用emits記錄每個組件發(fā)出的所有事件。

這一點特別重要,因為去除了.native修飾符。emits 現(xiàn)在在未使用聲明的事件的所有偵聽器都將包含在組件的中$attrs,默認情況下,該偵聽器將綁定到組件的根節(jié)點。

  <template>
    <button @click="onClick">OK</button>
  </template>
  <script>
  export default {
    emits: ['click'],
    methods:{
      onClick(){
        this.$emit('click', 'OK')
      }
    }
  }
  </script>
  • v-model 的適配 Vue3 的 v-model 相對 Vue2 來說 ,有了較大的改變。可以使用多 model,相應(yīng)語法也有變化。更多

    • 修改 modelValue 用于自定義組件時,Vue3 v-model prop 和事件默認名稱已更改 props.value 修改為 props.modelValue ,event.value 修改為 update:modelValue

      export default {
        props: {
          // value:String,
          // 替換 value 為 modelValue
          modelValue:String
        }
      }
      
  • 事件返回 將之前的 this.$emit('input') 修改為 this.$emit('update:modelValue') ,vue3 中將省略這一步驟

    自定義組件上的 v-model 相當于傳遞了 modelValue prop 并接收拋出的 update:modelValue 事件:

      <ChildComponent v-model="pageTitle" />
    
      <!-- 是以下的簡寫: -->
    
      <ChildComponent
        :modelValue="pageTitle"
        @update:modelValue="pageTitle = $event"
      />
    

若需要更改 model 名稱,作為組件內(nèi) model 選項的替代,現(xiàn)在我們可以將一個 argument 傳遞給 v-model:

    <ChildComponent v-model:title="pageTitle" />

    <!-- 是以下的簡寫: -->

    <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
  • 插槽的適配

    Vue3 將不支持 slot="xxx" 的用法 ,請使用 v-slot:xxx 用法。更多

    <!--  Vue2 支持的用法 -->
    <uni-nav-bar>
      <view slot="left" class="city">
        <!-- ... -->
      </view>
    </uni-nav-bar>
    
    <!--  Vue3 支持的用法 -->
    <uni-nav-bar>
      <template v-slot:left>
        <view class="city">
          <!-- ... -->
        </view>
      </template>
    </uni-nav-bar>
    
  • 從 Vue 3.0 開始,過濾器已刪除,不再支持,建議用方法調(diào)用或計算屬性替換它們。更多

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容