介紹

?? 你在使用 VueJs 2 嗎？?? 是否有從 Vue 2 遷移到 Vue 3 的
要求？ ?? 您是否對整個遷移過程感到沮喪和困惑？ ??你想結束你的斗爭嗎？

我們是來幫你的！我們的許多技術讀者建議為初學者編寫一個關于從 VueJS 2 遷移到 VueJS 3 的描述性教程。所以，我們在這里，回到分步指南。如果您不熟悉遷移過程，請不要擔心。我們將從頭開始學習它。

因此，讓我們了解為什么從 Vue 2 遷移到 Vue 3 是必不可少的。

為什么要從 Vue 2 遷移到 Vue 3？

IT 行業(yè)隨著時間的推移而發(fā)展，技術及其技術要求也是如此。即使技術堆棧中的一項技術已經更新，保持項目更新是不可避免的。這是因為每當技術發(fā)展時，它都會更新其依賴項和庫，刪除不需要的垃圾代碼，并添加增強開發(fā)和工作流程的新功能。

Vue 3 是比較新的更新技術。沒有必要立即將你的整個 Vue 2 項目更新到 Vue 3，但你應該開始計劃它，因為隨著時間的推移，越來越少的第三方庫將支持版本 2，也許 VueJS 不會降低對版本 2 的開發(fā)支持。

VueJs 3 是從頭開始編寫的，具有更好的性能、更好的 tree-shaking、更小的尺寸、改進的 TypeScript 支持以及許多用于開發(fā)大型企業(yè)軟件的新功能。

現在，在我們開始從 Vue 2 遷移到 Vue 3 的過程之前，了解這兩個版本之間的差異以及 Vue 3 中已實現的改進至關重要

Vue2 和 Vue3 的區(qū)別

Vue 2 和 Vue3 之間的主要區(qū)別在于技術特性，例如創(chuàng)建新應用程序、處理多個根、使用組合 API、傳送、實現生命周期掛鉤、使用片段和提高性能。讓我們詳細了解這些方面中的每一個。

?? 創(chuàng)建一個新的應用程序

Vue2 和 Vue3 之間的第一個主要區(qū)別是從頭開始創(chuàng)建應用程序。
您將必須遵循標準流程，其中包括安裝 Vue CLI（命令行界面）

安裝 Vue2 – npm install vue@2.xx
安裝 Vue3 – npm install vue

此外，除了語法上的差異外，代碼本身的性質也存在根本差異。創(chuàng)建應用程序涉及代碼編寫方式和指導其開發(fā)的基本原則的轉變。

例如，在Vue2中，當你使用像mixins這樣的全局配置時，它可能會在測試過程中導致問題，因為配置會影響多個實例，從而導致測試用例污染。

讓我們看一個 Vue2 的例子。

// 這個 mixin 影響以下兩個實例Vue.mixin({
  /* ... */});const app1 = new Vue({ el: "#app-1" });const app2 = new Vue({ el: "#app-2" });

但是，在 Vue3 中，您可以通過使用“createApp()”來避免這個問題，它允許您為您的應用程序創(chuàng)建單獨的實例。您還可以使用僅影響單個模型的本地配置，例如 mixin。

讓我們看一個 Vue3 代碼的例子。

const app = createApp(App);// 該配置只影響1個實例app.mixin(/* ... */);app.mount("#app");

這樣，您可以使用它們的配置創(chuàng)建應用程序的多個實例，而不必擔心它們會相互影響。

?? 多重根

在 Vue 2 中，你只能有一個主父元素。在這種情況下，“div”元素是組件的單個根元素，如果有多個元素，則必須先將它們包裹在一個父元素中。

Vue2 組件示例

相反，在 Vue3 中一個組件可以有多個根模板，所以你可以快速返回一個元素數組，而不用將它們包裹在一個單父元素中。
在下面的例子中，“h1”和“p”都是組件的根元素。

Vue3 組件示例

?? 合成 API

Composition API 是 Vue 3 中的新增功能，它建立了一種靈活的組織代碼的方式。Vue2 和 Vue3 之間的關鍵區(qū)別在于 Composition API 以及它們如何處理組織和組件邏輯。

正如你在下面看到的，組件邏輯被分成了不同的部分，這使得理解和維護變得更加困難

示例 Vue2

導出默認{
  數據 （） {
    返回 {
      計數：0
    }
  },
  計算：{
    雙計數（）{
      返回 this.count * 2
    }
  },
  方法： {
    增量 （） {
      這個.count++
    }
  },
  手表： {
    計數（新值，舊值）{
      // 當計數改變時做一些事情
    }
  },
  安裝（）{
    // 當組件被掛載時做一些事情
  }}

Vue3 中的比較 API 允許開發(fā)人員根據“setup()”函數中的邏輯關注點來配置代碼，從而使代碼更易于維護和組織。
在 Vue3 中，這些特性可以與 setup() 函數結合使用來構建 Vue3 組件

• 成分

• 道具

• 數據

• 方法

• 計算屬性

• 發(fā)射事件

Vue3的例子

import { ref, computed, watch } from 'vue'導出默認{
  設置 （） {
    常量計數 = ref(0)
    const doubleCount = computed(() => count.value * 2)
    const 增量 = () => {
      計數值++
    }
    手表（計數，（新值，舊值）=> {
      // 當計數改變時做一些事情
    })
    返回 {
      數數，
      雙計數,
      增量
    }
  }}

Vue3 演示了使用“參考（）函數創(chuàng)建一個與 Vue 2 相比更小的反應變量“數據（）”方法。

這“計算（）”函數創(chuàng)建一個計算屬性，而“手表（）”用于觀察變化。所有這些功能都是從“視點”包裝使其易于使用。

?? 傳送

在 Vue3 中，一個有趣的功能使您能夠在與邏輯放置位置不同的位置呈現組件，即使它不在應用程序的范圍內。

<示例組件>
   < 傳送到 ="#teleport-target ">
     <彈窗/>
   </傳送></示例-組件><div id="teleport-target">></div>

例如，在上面提供的代碼中，“彈出窗口”組件被放置在“示例組件”但它在帶有 id 的 div 中呈現“傳送目標。”
此功能特別有利于在應用程序的各個部分顯示組件，例如彈出窗口和模式。

?? 生命周期鉤子

Vue2 生命周期方法有生命周期鉤子，例如 beforeCreate()、created()、beforeMount()、mounted()、beforeUpdate()、updated()、beforeDestroy()。

Vue2的例子

導出默認{
  數據（） {
    返回 {
      消息：“你好，世界！”，
    };
  },
  創(chuàng)建（）{
    console.log("組件創(chuàng)建");
  },
  安裝（）{
    console.log("組件掛載");
  },
  更新（） {
    console.log("組件更新");
  },
  銷毀（）{
    console.log("組件銷毀");
  },};

但是在Vue3中，所有的生命周期鉤子都在setup()方法內部，并且對部分鉤子進行了重命名。例如，
beforeDestroy() 更名為 beforeUnmount()
destroyed() 更名為 unmounted()。

Vue3 中的示例

從“vue”導入{onBeforeMount，onMounted}；導出默認{
  設置（） {
    onBeforeMount(() => {
      console.log("掛載前");
    });
    onMounted(() => {
      console.log("掛載");
    });
  },}

以上是我們如何在 setup() 中使用 onBeforeMount() 和 onMounted() 來處理我們之前需要在 beforeCreate() 和 created() 中執(zhí)行的操作的示例。

Composition API 取代了舊的 Options API，并使用 setup() 方法作為舊的 beforeCreate() 方法的等價物，created() 緊隨其后。這簡化了組件創(chuàng)建并消除了對冗長、不必要的方法的需要。

??碎片

Vue 2 只允許組件有一個根節(jié)點，而 Vue 3 支持使用片段的多個根節(jié)點來實現更動態(tài)的模板。

在 Vue 2 中，數據屬性是自動響應式的，但在 Vue 3 中，您可以使用響應式函數來創(chuàng)建更細粒度和更復雜的響應式數據結構。

此函數創(chuàng)建一個代理對象來跟蹤對其屬性的更改，讓您更好地控制反應性?？偟膩碚f，與 Vue 2 相比，Vue 3 提供了更多的靈活性和對反應性的控制。

從 Vue2 到 Vue3 的改進

我們現在討論了重大的技術差異，讓我們也看看將 vue 2 升級到 vue 3 必須考慮的其他改進。

• 更小的核心： Vue3 的核心比 Vue 2 更小，這減少了庫的大小并提高了性能。

• Tree-Shaking： Vue3 改進了對 Tree-shaking 的支持，最終從最終包中消除了未使用的代碼。這意味著捆綁包尺寸小，加載時間更快。

• 優(yōu)化插槽生成： Vue3 優(yōu)化了插槽生成，這有助于提高應用程序的整體性能。

• 吊裝和內襯： Vue3 使用吊裝和內襯來優(yōu)化生成的渲染函數，從而加快組件渲染速度。

• 改進的 Type Script 支持： Vue3 具有更好的 Type Script 支持，包括更好地推斷響應式屬性和改進 Composition API 的類型檢查。

• createApp 方法： Vue 3 的“createApp”方法中的初始化代碼每次調用時都會返回一個 Vue 應用程序的新實例，允許開發(fā)人員獨立配置每個實例并共享功能而不影響其他實例。

當我們轉到遷移教程時，以下是您應該研究遷移的重大更改。

從 Vue 2 遷移到 Vue 3：重大更改

• 全球API

• 模板指令

• 組件的工作

• 渲染功能

• 自定義元素

• 其他小改動（可能會影響您的項目）

• 刪除的 API

教程目標：Vue 2 到 Vue 3 的遷移

遷移過程可能非常復雜和繁忙。因此，為了簡化流程，我們使用了一個基本的演示應用程序，該應用程序從JSON Placeholder API獲取用戶數據，并將構建一個簡單的 UI 來顯示它。

因此，這就是我們將在教程中介紹的內容。

• 構建 VueJS 2 演示應用程序

• 更新 CDN 腳本

• 更新 VueJS 實例

• 更新 VueJS 路由器實例

創(chuàng)建 VueJs 2 項目

在這里，我們使用 Vue-2 來創(chuàng)建我們的應用程序。

導航到您的項目并使用這些命令運行應用程序。

cd vue2-to-vue3-examplenpm 運行服務

您的瀏覽器將顯示默認用戶界面，如下所示。

Vue2 package.json 文件。

建立用戶界面

每個 Vue 組件都存在于 .vue 文件中。一個 Vue 組件由三部分組成。

1. <template> – 包含組件的 HTML
2. <script> – 所有的 JavaScript 邏輯都寫在這個標簽里
3. <style> > – 組件的 CSS 寫在這個標簽里

您是否正在為您的項目尋找精通 VueJs 的開發(fā)人員？
Bacancy 在這里等你！立即聯系我們并聘請Vue 開發(fā)人員來構建、優(yōu)化和部署您的應用程序。

創(chuàng)建組件

這里我們創(chuàng)建兩個組件：

• 主頁組件

• 用戶列表組件

App.vue

App.vue 是所有組件的父級。它定義了我們頁面的模板。

<模板>
  <div id="應用程序">
    <div id="導航">
      <router-link to="/">主頁</router-link> |
      <router-link to="/about">關于</router-link>
    </div>
    <路由器視圖/>
  </div></模板>

首頁.vue

在 Home.vue 組件中我們做了以下事情：

• 我們打電話給mapState、mapGetters 和 mapActions來自 vuex

• 我們使用一個'安裝'掛鉤到 fetchUsers

• 我們已經過去了'getAllUsers' (mapGetter) 和 isLoading(mapState)作為“UserList”組件的道具。

<模板>
  <div class="家">
    <h1 class="text-3xl mb-6 font-bold">用戶列表</h1>
    <用戶列表 :getAllUsers="getAllUsers" :isLoading="isLoading"></用戶列表>
  </div></模板>

用戶列表.vue

在這里我們將收到 'getAllUsers' 和 'isLoading' 道具。獲取數據后，我們將使用表格來顯示用戶數據。v-for 將遍歷“tbody”元素上的 getAllUsers 數組并顯示用戶數據。我們還將實現 Vue2 提供的一項功能，即“過濾器”。這里我們將使用“SetEmail”過濾器。它將返回用戶的電子郵件，第一個字母較小。

<模板>
  <div 類="容器">
    <div v-if="isLoading">
        <h1 class="text-3xl font-bold">加載中...</h1>
    </div>
    <div class="overflow-x-auto relative" v-else>
      <table class="w-5/6 ml-auto mr-auto text-sm text-left text-gray-500 dark:text-gray-400">
        <頭
          class="text-xs text-gray-700 uppercase bg-gray-300 dark:bg-gray-700 dark:text-gray-400"
        >
          <tr>
            <th scope="col" class="py-3 px-6">名稱</th>
            <th scope="col" class="py-3 px-6">用戶名</th>
            <th scope="col" class="py-3 px-6">電子郵件</th>
            <th scope="col" class="py-3 px-6">公司名稱</th>
          </tr>
        </thead>
        <tbody v-for="user in getAllUsers" :key="user.id">
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-100">
            <td class="py-4 px-6">{{user.name}}</td>
            <td class="py-4 px-6">{{user.username}}</td>
            <td class="py-4 px-6">{{user.email | 設置電子郵件}}</td>
            <td class="py-4 px-6">{{user.company.name}}</td>
          </tr>
        </tbody>
      </表>
    </div>
  </div></模板>

配置商店：index.vue

從“axios”導入 axios從 'vue' 導入 Vue從 'vuex' 導入 VuexVue.use(Vuex)export default new Vuex.Store({
  狀態(tài)： {
    用戶：[]，
    正在加載：假
  },
  突變：{
    GET_USERS（狀態(tài)，用戶）{
      state.users = 用戶
    }
  },
  行動：{
    異步 fetchUsers({commit, state}){
      state.isLoading = true;
      const res = await axios.get('https://jsonplaceholder.typicode.com/users')
      提交（“GET_USERS”，res.data）
      state.isLoading = false
    }
  },
  
  吸氣劑：{
    getAllUsers（狀態(tài)）{
      返回 state.users
    }
  },
  模塊：{
  }}

輸出

如何從 Vue 2 遷移到 Vue 3？

現在，我們已經完成了使用 VueJS 2 構建一個基本的演示應用程序。之前，這里的文件是從 Vue2 遷移到 Vue3 需要遵循的基本過程：

• 首先，我們確保我們的@vue/cli-service 是最新版本。

• 更新我們的 vue-cli 命令是 – vue upgrade

• 現在修改我們的“package.json”文件。這里我們要卸載vue2和vue-template-compiler。VueJS 不需要它們。

• 跑過npm 安裝安裝vue3、@vue/compat和編譯器@vue/compiler-sfc的命令。

安裝vue-router@4和vuex@4，更新到最新版本如下圖。

創(chuàng)建一個 vue.config.js 文件來設置編譯器選項以獲取遷移構建工作。

完成基本配置后，啟動開發(fā)服務器。您將收到一些錯誤消息的通知。那么，讓我們開始解決它們

主程序

首先，我們將修復 vue3 的 main.js 文件。下面是比較。

// 主.js

路由器文件：index.js

現在，打開路由器文件并使用以下代碼進行遷移。

存儲文件：index.js

現在更新存儲文件。

存儲文件中的剩余代碼將保持原樣。

package.json 文件

我們還需要更新 package.json 文件。使用下圖，我們已經更新了依賴項。

首頁.vue

Vue 3 帶有一個名為“compositionApi”的新功能，它是“optionsApi”的替代品。但是，您也可以使用 optionsApi。

這里我們使用 compositionApi。

• 'onMounted' 在組件安裝后調用。要使用它，我們必須從“vue”導入它。

• 'setup()' 掛鉤用作組件中 Composition Api 使用的入口點。

• 'computed()' 與 optionsApi 中的 computed() 屬性相同。要在 compositionApi 中使用它，我們必須從“vue”中導入它。它接受一個 getter 函數，并為 getter 的返回值返回一個只讀的反應式“ref”對象。

• 要在“setup”掛鉤中訪問商店，我們可以調用“useStore()”函數。它等效于使用“Options API”在組件中檢索“this.$store”。

<模板>
  <div class="家">
    <h1 class="text-3xl mb-6 font-bold">用戶列表</h1>
    <user-list :getAllUsers="getAllUsers" :isLoading="isLoading"></user-list>
  </div></模板>

用戶列表.vue

在 Vue 3 中，“過濾器”已被刪除。我們可以使用“computed()”屬性代替過濾器。

<模板>
  <div 類="容器">
    <div v-if="isLoading">
        <h1 class="text-3xl font-bold">加載中...</h1>
    </div>
    <div class="overflow-x-auto relative" v-else>
      <table class="w-5/6 ml-auto mr-auto text-sm text-left text-gray-500 dark:text-gray-400">
        <頭
          class="text-xs text-gray-700 uppercase bg-gray-300 dark:bg-gray-700 dark:text-gray-400"
        >
          <tr>
            <th scope="col" class="py-3 px-6">名稱</th>
            <th scope="col" class="py-3 px-6">用戶名</th>
            <th scope="col" class="py-3 px-6">電子郵件</th>
            <th scope="col" class="py-3 px-6">公司名稱</th>
          </tr>
        </thead>
        <tbody v-for="user in getAllUsers" :key="user.id">
          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-100">
            <td class="py-4 px-6">{{user.name}}</td>
            <td class="py-4 px-6">{{user.username}}</td>
            <!-- <td class="py-4 px-6">{{user.email | setEmail}}</td> -->
            <td class="py-4 px-6">{{user.email.toString().charAt(0).toLowerCase() + user.email.toString().slice(1)}}</td>
            <td class="py-4 px-6">{{user.company.name}}</td>
          </tr>
        </tbody>
      </表>
    </div>
  </div></模板>

在 Vue2 與 Vue3 中進行測試

使用 jest 在 vue2 和 vue3 中進行測試是相似的，但要記住一些差異。

以下是如何在 vue2 中使用 jest 設置單元測試。

Vue2

如果您使用 Vue CLI 創(chuàng)建項目，那么您可以使用名為cli-plugin-unit-jest 的插件來創(chuàng)建和運行 Jest 測試。

vue 添加單元笑話

該插件為我們提供了所有必需的依賴項（包括 jest），還創(chuàng)建了一個 jest.config.js 文件，并生成了一個示例測試套件。

之后，您可以使用 npm 或 yarn 安裝 Vue Test Utils 包，如下所示。

npm install --save-dev @vue/ test-utils@legacy

手動安裝

這里的主要任務是使用npm或yarn安裝Vue Test Utils和vue-jest來處理SFC：

npm install --save-dev @vue/ test-utils@legacy vue-jest

然后，Jest 可以從 .vue 文件生成 vue-jest 文件。這是你如何做到的。您可以在 package.json 或單獨的Jest 配置文件中添加以下配置：

{
      “開玩笑”：{
        “模塊文件擴展”：[
          "js",
          “JSON”，
          // 告訴 Jest 處理 `*.vue` 文件
          “視覺”
        ],
          “轉換”： {
          // 使用 `vue-jest` 處理 `*.vue` 文件
          ".*\\.(vue)$": "vue-jest"
        }
      }
 }

有關測試的更多詳細信息，您可以查看以下鏈接。
安裝

Vue3

使用 vue-cli 創(chuàng)建一個新的 Vue3 項目。

vue 創(chuàng)建我的應用程序

這里有多個選項，但您可以選擇“手動選擇特征”選擇并接受“單元測試”和“笑話”從功能列表。

運行以下命令以生成示例測試文件。

npm 運行測試：單元 -- -c

在“tests/unit”文件夾中打開生成的測試文件并編寫測試代碼。
通過運行以下命令來運行測試。

npm 運行測試：單元

請注意，在 Vue3 中，jest 配置為使用新的“@vue/test-utils”用于測試組件的包。這個包提供了用于在 Jest 環(huán)境中安裝和測試 Vue 組件的實用程序。

從 Vue Test Utils v1 遷移
如果您想了解從 vue2 到 vue3 的單元測試更改，請參閱以下鏈接。
移民

Github 存儲庫：vue2-to-vue3-example

因此，這些是實現從 vue 2 到 vue 3 的遷移過程的步驟。您可以訪問源代碼：vue2-to-vue3-example。克隆存儲庫并試驗代碼。

結論

（言鼎科技）