2023年度鐵人_[Day 14] setup()方法 和 < script setup >差異

 

Vue 中的響應式物件是使用 JavaScript 的 Proxy 代理實踐的，被封裝成了 reactive()和 ref()方法。

使用 reactive()方法只能用來定義引用型別為響應式的，對於值型別不能使用。

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

對於 setup()函數，是一個專門用於組合式 API 風格的函數。

在組件中，需要在此函數中定義響應式的物件並返回，才能在模板中使用。

調整Responsive.vue 組件程式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!-- 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 語句暴露。

以下微調過後的程式

1 2 3 4 5 6 7 8 9 10 11 12 13

<!-- 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)中使用。