Vue2 & Vue3 其中一個最大的差別就是寫法上的差別了。Vue3 新增了 Composition API 的寫法。相較於 Vue2 的 Options API，在可讀性上有了改善。

Options API

Options API 是以程式碼的性質來區分程式碼。因為一個功能各自的邏輯可能會散落在各處，當專案的架構一大，當你在維護時，要尋找關聯的功能就變得相對難找，也會變得越來越難閱讀。

以一個功能而言，在Options API 上可能會寫成這樣 :

data() {
       return{
            // 資料
       }
    },
    computed() {
        // 計算功能的資料
    },
    mounted() {
        // 顯示功能
    },
    methods() {
        // 新增、更改、刪除 功能
    }

Composition API

Compositions API 則是按照 邏輯 來區分程式碼，因此同一個功能都可以寫在一起。
在可讀性上也比較優越。

    setup() {
        // 1. 顯示 todos 的功能...

        // 2. 計算功能的資料 ...

        // 3. 新增、修改、刪除 todos 的功能....
        
    }

Composition API 使用 setUp 定義資料

相對於 opsitions API 定義資料的方式是在 data 函式內進行， Compositions API 則是 reactive 和 ref 來定義資料。

在 compositions API 當中，我們不會調用 this。HTML 的寫法則和 Vue2 一樣沒有改變。

ref 要調用其值，須加上.value。且 ref 不會監聽物件、陣列內層變動。

ref 寫法

ref 可以定義純值的變數，也可以定義物件。

<div > {{num}} </div>
<input type="text" v-model="num">
<button @click="add">累加按鈕</button>

    setup() {
       const num = ref(1)
       
       // 對應 vue2 的 methods
       function add(){
           // 要調用 ref 的值需要在後面加上 .value
           num.value++
       }
       // 資料、方法如果要在畫面上運作的話，都需要 return
       return {
           num,
           add,
       }
    }

reactive 寫法

reactive 要調用其值，需使用 陣列 或 物件。reactive 可以對資料進行深層的監聽，調用資料時也不必像 ref 須加上.value。

注意 : 請使用 const 來定義 reactive 的物件，讓這個物件本身是不可改的，否則會失去 Proxy 雙向綁定的特性，變成一般的物件了。(用 let 的話，資料容易被覆蓋)

    setup() {
       const person = reactive({
           name: "Yin"
       });
  
       return {
           person
       };
    }

ref & reactive 都幾?

注意 : 兩者在定義時，請都使用 const。

實際上，大多數情況下兩者可以替換使用，取決於個人或團隊習慣。但實戰中 ref 還是比較好用的、且不會出錯的方法。除了取值都必須加上 .value，他也不會像 reactive 可能會有資料被覆蓋的問題。

並且，如果我們現在有一筆從 Ajax 回傳的資料，我們是不能再把這筆資料寫回 reactive 定義的資料上的。他會失去 Proxy 的特性，變成普通的物件。

    setup() {
       
       const person = reactive({
           name: "Yin"
       });
       // 假設這筆資料是從 Ajax 抓回來的資料
       const data = {
           name : "小花"
       }
       
       person2 = data;
       console.log(person2) // { name : "小花"}
       
       return {
           person
       }
    }

參考資料:
響應式資料 ref、reactive及 v-model 雙向綁定
[重構倒數第29天] - Vue2 Option API 轉換 Vue3 Composition API
不只懂 Vue 語法：試說明 Composition API 與 Options API 概念和語法的分別？