Vue.js 什么是 Composition API？

今天我們來聊聊 Vue 3 引入的一個重要特性：組合式 API（Composition API）。如果你曾在開發復雜的 Vue 組件時感到代碼難以維護，那么組合式 API 可能正是你需要的工具。

什么是組合式 API？

組合式 API 是 Vue 3 提供的一套基于函數的 API，允許開發者以更靈活的方式組織組件邏輯。與傳統的選項式 API（Options API）不同，組合式 API 使我們能夠根據功能將相關代碼組合在一起，提升代碼的可讀性和可維護性。

為什么引入組合式 API？

在使用選項式 API 時，組件的邏輯通常分散在不同的選項中（如 data、methods、computed 等）。當組件變得復雜時，相關邏輯可能被拆散，導致代碼難以閱讀和維護。組合式 API 通過允許我們將相關邏輯集中在一起，解決了這一問題。

組合式 API 的核心概念

1. setup 函數

   setup 是組合式 API 的入口函數。它在組件實例創建之前執行，用于初始化組件的 props、狀態和邏輯。

   <script setup>
   import { ref } from 'vue';// 定義一個響應式變量
   const count = ref(0);// 定義一個方法來更新變量
   function increment() {count.value++;
   }
   </script><template><div><p>當前計數：{{ count }}</p><button @click="increment">增加</button></div>
   </template>
   

   在上述示例中，setup 函數使用 ref 創建了一個響應式變量 count，并定義了一個方法 increment 來更新該變量。

2. 響應式 API

   組合式 API 提供了 ref 和 reactive 等函數來創建響應式狀態：

   • ref：用于創建包含單一值的響應式引用。

     const count = ref(0);
     console.log(count.value); // 輸出: 0
     

   • reactive：用于創建包含多個屬性的響應式對象。

     const user = reactive({name: 'Alice',age: 25
     });
     console.log(user.name); // 輸出: Alice
     

3. 生命周期鉤子

   在組合式 API 中，生命周期鉤子以函數形式提供，例如 onMounted、onUpdated 和 onUnmounted。

   import { onMounted } from 'vue';onMounted(() => {console.log('組件已掛載');
   });
   

組合式 API 的優勢

• 更好的代碼組織：將相關邏輯集中在一起，提升代碼可讀性。
• 邏輯復用：通過創建可復用的函數，實現邏輯的共享和復用。
• TypeScript 支持：組合式 API 對 TypeScript 具有更好的支持，提供了更強的類型推斷和檢查。

總結
組合式 API 為 Vue 開發者提供了一種更靈活、高效的方式來組織和復用代碼。通過掌握組合式 API，你可以更輕松地管理復雜組件的邏輯，提高代碼的可維護性和可讀性。