實踐練習：將現有組件重構為使用組合式 API

理解重構過程

重構是任何開發者的關鍵技能，尤其是在采用新范式如 Vue.js 中的 Composition API 時。它涉及在不改變外部行為的情況下重新組織現有代碼，旨在提高可讀性、可維護性和可重用性。在從 Options API 遷移到 Composition API 的背景下，重構使我們能夠利用后者的優勢，如更好的代碼組織和邏輯重用，而無需從頭開始重寫整個組件。本課程將引導你通過一個實際的重構練習，演示如何系統地將一個 Options API 組件轉換為它的 Composition API 等價物。

關鍵概念和原則

1. 識別重構機會

在深入代碼之前，需要識別你的 Options API 組件中哪些部分最能從 Composition API 中受益。尋找以下部分：

• 包含復雜的邏輯，難以理解。
• 在多個組件中重復。
• 涉及分散在組件中的反應性數據。

例如，考慮一個組件，它獲取數據，根據用戶輸入進行過濾，并顯示結果。這種邏輯可以使用組合式 API 在一個可組合函數中整齊地封裝起來。

2. setup 函數

setup 函數是 Vue 組件中 Composition API 的入口點。它用于聲明響應式數據、定義方法，并返回在模板中可用的值。

• 基本示例：

  <template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
  </template><script>
  import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};},
  };
  </script>
  

  在這個例子中，ref 被用來創建一個響應式變量 count。increment 函數修改這個值。count 和 increment 都從 setup 返回，使它們在模板中可以被訪問。

• 高級示例：

  <template><div><p>Message: {{ message }}</p><button @click="updateMessage">Update Message</button></div>
  </template><script>
  import { ref, onMounted } from 'vue';export default {props: {initialMessage: