這是我的第二天(●´ω｀●)ゞ

在官方文件中，目前公告Vue2將於2023/12/31停止維護，但應該仍有許多公司的專案仍維持Vue2的寫法，他們在結構上有什麼不同，希望能慢慢釐清，畢竟我從去年就沒搞懂，直到現在開始重新閱讀，真的是.......希望我能持續到第三天，加油！

從命名方式來看Options API直譯是選項式API，它基於選項如 data(所有變數放在這裡), methods(function都寫在這裡), computed（計算屬性), mounted(撰寫生命週期) ......等來組織組件的邏輯。

<template>
  <div>
    <input v-model.number="num1" placeholder="Enter first number" />
    <input v-model.number="num2" placeholder="Enter second number" />
    <button @click="calculate">Calculate</button>
    <p>Sum: {{ sum }}</p>
    <p>Difference: {{ difference }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      sum: 0,
      difference: 0
    };
  },
  methods: {
    calculate() {
      this.sum = this.add(this.num1, this.num2);
      this.difference = this.subtract(this.num1, this.num2);
    },
    add(a, b) {
      return a + b;
    },
    subtract(a, b) {
      return a - b;
    }
  },
  computed: {
     sum() {
       return this.num1 + this.num2;
        },
     difference() {
       return this.num1 - this.num2;
     }
  },
  mounted() {
    console.log("Component is mounted!");
  }
};
</script>

<style scoped>
/* Add some styling if necessary */
</style>

優點在於屬性劃分清楚，較容易學習，例如data就負責了變數值的變更；缺點則是當組件範圍越廣，撰寫函式的methods區塊則會變得難以閱讀。雖然說可以使用mixin重新組合程式碼，但有可能因為重複命名或者因引用地方眾多，須逐一確認的情況下，出現了以功能為中心的Composition API(組合式API)，在 setup 函數中集中組織邏輯，需要用到的函式透過return後才能使用。

<template>
  <div>
    <input v-model="message" placeholder="Type something" />
    <button @click="reverseMessage">Reverse</button>
    <p>{{ reversed }}</p>
  </div>
</template>

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

export default {
  setup() {
    // 使用 ref 宣告響應性數據
    const message = ref('Hello Vue 3!');

    // 使用 computed 創建計算屬性
    const reversed = computed(() => message.value.split('').reverse().join(''));

    function reverseMessage() {
      message.value = message.value.split('').reverse().join('');
    }

    // 返回 setup() 中的所有屬性和方法，這樣它們才能在模板中使用
    return {
      message,
      reversed,
      reverseMessage
    };
  }
};
</script>

從上述的程式碼中可以看出，Options API的建構方式相較Composition API較為分散，而Composition API則是將邏輯寫在一塊，當需要使用此函式時，透過return達到使用的情境。

• 還有明天:03天 ---> 應該是了解ref和reactive的差異

---待更新