遷移到 Vue 3 Composition API 以實現更好的組件開發

由於 Vue 的創建者宣布 Vue 2 將於 2023 年 12 月 31 日結束，因此鼓勵開發人員切換到 Vue 3。

這種演變的引入帶來了複合應用程序平台接口，它通過模塊化和聲明性設計原則提供了一種更精簡、更明確和類型安全的構建 Vue 項目的方法。

什麼是組合 API?

Composition API 的出現標誌著與使用 Options 對象構建 Vue 組件的傳統方法的重大背離。擁抱這種漸進式技術與日益自信和聲明性的心態相一致，這種心態強調專注於構建 Vue 應用程序，而不受複雜的實現細節的阻礙。

Composition API 的動機

Vue 的開發人員發現，隨著項目規模的增加，使用 Options 對象構建複雜的 Web 應用程序會遇到困難。具體來說，大規模管理組件邏輯變得不太可行，並且在協作環境中更難以維護。

Options 對象的傳統實現經常導致大量的組件屬性，導致代碼由於其複雜性而難以理解和管理。

此外，事實證明，在不同組件之間利用共享邏輯很不方便。此外，分散在多個生命週期掛鉤和方法中的傳播邏輯進一步加深了對單個組件總體行為的理解。

Composition API 的優點

與選項 API 相比，組合 API 的使用具有許多優勢，可以增強整體功能和用戶體驗。

提高性能

Vue 3 引入了一種創新的渲染方法，稱為基於代理的反應系統，旨在增強性能和反應能力。通過最小化內存使用和優化反應性，這個新系統可以以更高的效率改進對廣泛組件層次結構的處理。

較小的捆綁尺寸

由於 Vue 3 優化的代碼庫和 tree-shaking 功能提供了精簡的架構和高效的資源分配，與前身相比，它擁有更緊湊的捆綁包，從而實現更快的加載時間和增強的整體性能。

改進的代碼組織

通過利用 Composition API 的功能，可以通過實現更小的、可重用的函數，將組件的源代碼分解為更易於管理的模塊化單元。這種方法不僅可以增強理解並促進持續維護，而且可以作為解決複雜而廣泛的組件所帶來的挑戰的寶貴策略。

組件和功能的可重用性

組合函數的利用允許在各種組件內無縫集成和重用代碼，從而形成一個高效的共享功能庫。

更好的 TypeScript 支持

Composition API 的引入顯著提高了 Visual Studio Code 中的 TypeScript 支持水平，從而提高了類型推斷的準確性，並增強了在開發過程中檢測和解決印刷差異的能力。

選項對象和組合 API 之間的比較

鑑於您熟悉 React 的 Composition API 的理論基礎，您現在準備將這些知識應用到實際環境中。將 Composition API 提供的好處與類組件提供的好處進行比較將有助於闡明其價值主張。

Vue 3 中的反應式數據

響應式數據是 Vue 的一個關鍵原則，它可以實現數據修改和用戶界面上相應更新之間的無縫交互，而無需顯式操作或重新加載頁面。這種自動同步可確保為用戶提供高效且響應迅速的體驗。

Vue 2 利用 Object.defineProperty 方法作為其反應式系統的基礎，該系統構建在包含應用程序內所有反應式屬性的數據對象之上。

在 Vue 組件中使用“data”選項可以圍繞“data”對像中包含的每個屬性自動實現符合 ES6 的 getter 和 setter 方法。

前面提到的 getter 和 setter 監視屬性之間的相互依賴性，並動態調整用戶界面以響應對任何這些屬性所做的修改。

下面的插圖以更精緻的方式演示瞭如何利用 Options 對像在 Vue 2 中生成響應式數據:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },

  methods: {
    increment() {
      this.count\+\+;
    },
  },
};
</script>

在此示例中，我們說明了在 Vue.js 上下文中建立可變變量的過程。一旦在“數據”對象內定義了變量，它就會本質上接受更改和更新，從而導致相關應用程序的用戶界面發生修改。

此外，您還使用了“methods”對象來實現組件中使用的 JavaScript 函數。在本例中，代碼塊描述了“increment()”函數，該函數將“count”變量的值增加一。

為了在 Vue 2 應用程序中將函數用作方法，必須在函數調用及其關聯變量旁邊使用“this”關鍵字。這是因為“this”關鍵字用於引用相關數據對象的變量。在渲染組件時未能包含“this”關鍵字將導致 Vue 在安裝過程中生成錯誤。

Vue 3 實現了一個基於代理的反應系統，該系統利用 JavaScript 代理的強大功能來增強其功能。這種新方法提供了顯著的性能優勢，並改進了反應性依賴項的管理，從而帶來整體更高效的開發體驗。

Vue 提供了兩種類型的函數來定義響應式數據-ref 函數和reactive 函數。前者建立了對特定值的單獨反應性引用，而後者構建了包含許多屬性的完整反應性結構。

在本例中，我們將說明在 Vue 3 上下文中使用 ref 函數生成響應式數據的過程:

 <script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value\+\+;
}
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

為了在 Vue 3 的上下文中使用 ref() 函數，必須首先從 Vue 包中導入它。此函數用作創建對各種變量的反應性引用的方法。

提供的 JavaScript 代碼利用 ref() 函數創建對 count 變量的引用，並將其初始值設置為“0”。隨後，它將從 ref() 函數返回的對象分配給 count 變量。該對象包含一個名為“value”的屬性，該屬性用作“count”變量當前狀態的可變存儲。

“@click”指令在 Vue 框架中用於管理和響應組件渲染界面中發生的單擊事件。這種事件綁定機制允許自定義處理用戶交互，使開發人員能夠合併動態功能或在檢測到單擊事件時觸發特定操作。

在 Vue 3 中，在組件中定義函數的方法語法已被利用標準 JavaScript 函數所取代。這些函數在組件腳本的“setup”塊中定義。

現在可以通過將返回值方法與指定標識符相關聯來利用通過應用 ref() 函數建立的反應性屬性。作為說明，提供的代碼示例採用語法“count.value”來暗示“count”反應屬性的當前狀態。

Vue 3 中的計算函數

Computed 函數是 Vue 武器庫中的一個有價值的工具，可以創建從反應數據派生的計算值。每當任何依賴項發生變化時，都會發生此自動更新過程，從而保證結果計算始終保持最新且準確。

在 Vue 2 中，人們通過利用位於組件內的“計算”選項來定義組件的計算行為。下面提供了示例說明:

 <template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    }
  },
  methods: {
    incrementCount() {
      this.count\+\+;
    }
  }
};
</script>

在上述示例中，“doubleCount”計算屬性取決於“count”數據屬性。如果 count 屬性發生任何更改，Vue 將相應地重新評估 doubleCount 屬性。

在 Vue 3 中，組合 API 的引入提供了一種通過使用“compated”函數來定義計算屬性的新穎方法。該實現的語法如下:

 <script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

const incrementCount = () => {
  count.value\+\+;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementCount">Increment Count</button>
  </div>
</template>

為了利用從 Vue 包派生的計算函數，必須首先將所述函數導入到其代碼庫中。

在提供的代碼片段中，我們利用可計算函數建立了一個名為“doubleCount”的計算屬性。這種命名法強調了計算屬性對反應式數據源的依賴，這是 Vue 3 框架的一個顯著特徵。

所提供的實現定義了一個接受 getter 函數作為輸入的計算函數，其中後者負責從反應數據中導出值。具體來說，在本例中，“doubleCount”計算反射返回“count”反應變量乘以 2 的乘積。

值得注意的是，與使用 Options 對象構建的代碼塊相比，使用 Composition API 創建的代碼塊往往更清晰、更簡潔。

學習在 Vue 中創建自定義指令

Vue 3 的Composition API 提供了一種健壯且通用的方法，用於在組件模板中構建和重新利用代碼，使開發人員能夠通過提高模塊化性和可維護性來創建更精簡、更易於管理的Vue應用程序。

Vue 提供了額外的功能，可以提高創建 Web 應用程序的效率。人們可以獲得有關如何開發定制指令的知識，從而可以在 Vue 項目的各個部分中使用特定功能。