vue.JS 是乙個強大的 j**ascript 框架，用於開發 Web 應用程式。 Vue 2 已於 2023 年 12 月 31 日停止維護。 在 Vue 3 中，可組合的 API 增強了我們利用 Vue 的能力，使我們的 API 更加模組化和可讀性。 以下是 10 個常用的 VUE3 可組合 API：
在 Vue 3 中，它是通過復合 API 提供的ref功能，資料管理變得更加方便。 ref允許我們使用 Vue 的響應式系統跟蹤變數的值，允許我們在元件中更新此值。 ref值也被包裝以與 vue 的響應能力相容。 通過這種方式，我們可以更靈活地處理和更新元件中的資料。
在此示例中，乙個名為count之ref和使用increment該函式遞增其值。
使用可組合 API 建立計算屬性有助於根據元件中的依賴關係來表示和自動更新值。 在 Vue 3 中，它可以工作computed函式來定義計算屬性。 計算屬性依賴於其他反應性資料，並且僅當依賴項更改時才會重新計算值。 這樣可以更輕鬆、更高效地表示和處理元件中的派生資料。
在此示例中，乙個名為squared代表count的平方。
vue 的watch跟watcheffect函式使我們能夠觀察值的變化並做出相應的反應。 watch函式用於監視特定資料的變化，並在資料發生變化時執行函式。 它接受兩個引數：要監視的資料和函式。 當監控資料發生變化時，將觸發該功能。 watcheffect函式還用於監視資料中的更改，但它不需要指定要監視的特定資料。 相反，它會自動跟蹤其函式體中使用的任何反應性資料，並在該資料更改時觸發該函式。
在此示例中，watch功能觀察count值變化，而watcheffect每次渲染後都會觀察到該函式count價值。
在 Vue 元件中將方法和函式自定義為自定義鉤子，使它們可以在其他元件中重用，從而提高可讀性和可重用性。 我們可以將一些通用邏輯封裝為函式或方法，並在需要時通過自定義鉤子重用它們。 這樣做不僅更易於維護，而且還改進了元件之間的共享。
在此示例中，定義了乙個名為 uselocalstorage 的自定義鉤子，用於處理儲存在本地儲存中的值，該值由指定的鍵確定。
在復合 API 中，通過使用onmountedonupdated跟onunmounted用於管理元件生命週期的函式。 onmounted鉤子是在元件掛載到 DOM 後呼叫的。 onupdated鉤子在元件更新後呼叫。 onunmounted鉤子是在元件被銷毀之前呼叫的。
在此示例中，onmounted該函式捕獲安裝元件的時刻，以及onunmounted該函式捕獲元件解除安裝的時刻。
在 Vue 元件中發出 API 請求和管理非同步操作時，你可以使用像 Axios 這樣的庫。
在此示例中，使用 Axios 庫發出了 API 請求，以嘗試檢索資料。 任何錯誤都會記錄到控制台中。
要在 Vue 專案中啟用頁面之間的導航和配置路由，您可以使用 Vue Router。
在此示例中，使用 Vue Router 設定了乙個簡單的路由配置，並使用useroute該函式訪問元件內部當前路由的資訊。
大型應用使用 Vuex 進行狀態管理，在大型應用中，為了更高效的狀態管理，可以使用 Vuex，也就是 vueJS 提供的狀態管理庫是官方的。 Vuex 允許您在應用程式的多個元件之間共享和管理狀態，以確保一致性和可維護性。
在此示例中，使用 vuex 建立了乙個簡單的儲存，並且usestore該函式訪問元件內部的儲存。
在 Vue 中建立可自定義和可重用的 Vue UI 元件在 JS 中，你可以建立可自定義和可重用的 Vue UI 元件，這些元件可以靈活地適應你的應用程式的不同需求。 在設計元件時，考慮其靈活性、易用性和可維護性至關重要。
在此示例中，將建立乙個可自定義的按鈕元件，以使用插槽實現動態內容。
測試驅動開發是一種開發方法，其核心思想是在實際編寫測試之前編寫測試。 在 vue 中在JS開發中，TDD可以幫助確保應用程式的所有部分都有良好的測試覆蓋率，提高質量和可維護性。
在這個例子中，使用 vue test utils 完成了乙個簡單的測試，以確保元件正確渲染。
Vue 3 的可組合 API 引入了一種新的元件組織形式，以及一種更靈活的邏輯組織方式。 允許元件的邏輯根據功能劃分為函式，而不是侷限於原始選項（資料、方法、計算等）。 通過建立可重用的函式，您可以在不同的元件中使用相同的邏輯，從而提高可維護性和可重用性。 提供了更好的 TypeScript 支援，使得在 Vue 專案中使用 TypeScript 更加流暢。 這使開發人員能夠更好地處理複雜的元件邏輯，並在他們的專案中更好地利用 TypeScript。