Vue 中的響應式物件是使用 JavaScript 的 Proxy 代理實踐的，被封裝成了 reactive()和 ref()方法。
使用 reactive()方法只能用來定義引用型別為響應式的，對於值型別不能使用。

而ref()方法解決了 reactive()方法的缺點，可以定義任意型別為響應式的。若要在組件範本中使用響應式狀態，需要在 setup()函數中定義並回傳，而在 setup 屬性的< script >中，不需要回傳。

對於 setup()函數，是一個專門用於組合式 API 風格的函數。
在組件中，需要在此函數中定義響應式的物件並返回，才能在模板中使用。

調整Responsive.vue 組件程式

<!-- eslint-disable --> 
<template>
    <input type="button" @click="add" value="計算"/>
    <span>{{ sum }}</span>
</template>
<script>
    import { ref } from 'vue'
    export default {
        setup(){
            let sum = ref(0);

            let add = () => {
                sum.value++;
            };
            return {sum,add}
        }
    }
</script>

此程式碼的寫法是在 Vue2 中使用的，需要使用 export default 導出，並且必須使用 return 語句將需要在模板中使用的變數暴露出來。

由於在模板中要使用 sum 響應式變數和 add()函數
因此，需要將這2個使用 return 語句暴露到template中。

在 setup()函數中使用 return 語句暴露變數和函數非常繁瑣，當使用單一檔案元件（SFC）時，我們
可以使用< script setup >來大幅度地簡化程式碼。

就是在< script >標記上，使用 setup 屬性，然後直接寫變數和函數即可，無需使用 return 語句暴露。

以下微調過後的程式

<!-- eslint-disable --> 
<template>
    <input type="button" @click="add" value="計算"/>
    <span>{{ sum }}</span>
</template>
<script setup>
    import { ref } from 'vue'

    let sum = ref(0);
    let add = () => {
        sum.value++;
    };
</script>

在此Responsive.vue就變為一個SFC了
如此前後比較就更能理解為何後期這樣子撰寫方式更被推重，功能上運行是異曲同工之妙。

setup()方法 和 < script setup>差異

應用範圍層面來比較的話，setup()方法更廣泛一些，可以在單一檔案元件、*.js 元件中使用
而< script setup>則限定要在單一檔案組件(.vue)中使用。

本篇已同步發表至個人部落格
https://coolmandiary.blogspot.com/2023/09/2023day-14-setup.html