Vue全面升級指南：Composition API深度探索

• Composition API的核心概念與功能
  • setup() 函數：
  • 參考與反應：
  • 計算屬性與偵聽器：
  • 組合函數
  • 生命週期掛鉤：
• Composition API 編寫元件
• 從選項 API 遷移到組合 API
  • 組件結構
  • 依賴注入
  • 模板重建

Vue 3.x 全面升級，引入了 Composition API，相對於 Vue 2.x 傳統的 Options API 來說是一個重大改進。它提供了一種更靈活、更模組化的程式碼組織方式。

Composition API的核心概念與功能

設定（）函數：

Vue 3中的核心入口點，用於設定元件的狀態和邏輯，在beforeCreate鉤子之後、create鉤子之前執行。它取代了原來在資料、方法等選項中定義的內容。

參考與反應：

用於建立響應式數據，ref用於建立基本類型的響應式數據，reactive用於物件和陣列的響應式代理程式。

計算屬性和偵聽器：

compated 用於建立計算屬性，僅當依賴項變更時才重新計算。

watch 用於觀察回應資料的變化，並在發生變化時執行回呼。

組合函數

Composition API 鼓勵創建可重複使用的組合函數。

生命週期掛鉤：

Vue 3 中的生命週期鉤子不再直接在 setup() 內部使用，而是透過新的生命週期鉤子函數，例如 onBeforeMount 和 onMounted。

1。 onBeforeMount：此鉤子在元件掛載到 DOM 之前呼叫。這類似於 Vue 2.x 中的 beforeMount 生命週期鉤子。

2。 onMounted：元件掛載到 DOM 後立即呼叫。相當於Vue 2.x中掛載。

3。 onBeforeUpdate：在元件資料更新之前、DOM 更新開始之前呼叫。類似於 Vue 2.x 的 beforeUpdate。

4。 onUpdated：元件資料變化所造成的DOM更新完成後呼叫。相當於Vue 2.x中更新。

5。 onBeforeUnmount：在元件卸載之前呼叫。類似於 Vue 2.x 中的 beforeDestroy。

6。 onUnmounted：元件卸載後呼叫。相當於Vue 2.x中的destroyed。

7。 onActivated：僅當元件以 包裹時調用已啟動。

8。 onDeactivated：僅當元件以 包裹時呼叫已停用。

Composition API 編寫元件

• 建立響應式資料：使用 ref 和reactive 建立響應式變數。
• 計算屬性：使用計算函數建立計算屬性。
• 響應式函數：使用 toRefs() 和 toRef() 將物件屬性轉換為響應式。
• 監聽器：使用watch或watchEffect監聽資料變化。

• 建立響應式資料：使用響應式建立包含 cityInput、城市和天氣的響應式物件。 ref 也可以用於基本類型的響應式數據，但在這種場景下，reactive 更適合管理多個狀態。

• 計算屬性：currentCity 計算屬性直接傳回 state.cityInput 的值。雖然在本例中直接使用 v-model="cityInput" 可能更直觀，但它顯示如何定義計算屬性。

• 響應式函數：使用toRefs將狀態物件的屬性轉換為獨立的響應式引用，以便在範本中直接綁定。這主要展示了響應式資料的使用，而不是轉換函數本身，因為在模板中直接解構賦值（如 const { cityInput } = state;）就足夠了。

• 監聽器：使用watch監聽cityInput的變化，並在每次input變化時清除天氣狀態，以便下次查詢。

從選項 API 遷移到組合 API

組件結構

將狀態、方法和邏輯分離到單獨的函數中。在Options API中，我們通常會在元件選項中定義資料、方法、計算等。在 Composition API 中，這些邏輯被分成單獨的函數。例如：

選項 API：

合成 API：

依賴注入

使用提供和注入。在Options API中，我們使用provide和inject來傳遞資料。在 Composition API 中，此過程保持不變：

選項 API：

合成 API：

模板重構

將綁定的屬性和方法從此轉換為直接引用。

以上是Vue全面升級指南：Composition API深度探索的詳細內容。更多資訊請關注PHP中文網其他相關文章！