文科少女學程式

最近開始嘗試script setup的寫法，雖然少寫了很多東西，但在用的過程中，因為使用前沒先看仔細說明書，所以還是有碰到一些小小的雷，這時候就是該來好好學習＆寫筆記的時候啦！
因為會以實際應用的情境為主，所以基本上會專注在我自己在實務過程中，比較常會碰到的用法，那就直接進入正題。

<script setup>是什麼？
是一種在SFC(Single File Component)中使用的語法糖，在使用這個語法糖時，大多數時候跟使用<setup>沒有太大的差異，但還是有些地方需要注意。另外，這邊也簡單提一下用這個語法糖比較大的優點是什麼，主要是不再需要透過return，才能在template使用特定的變數或函式(也包含import進來的內容)，也因為如此，能讓程式碼看起來更簡潔。
單純用文字說明，可能感受不出差異，直接看範例吧！
一般<script>

<script setup>

有發現了嗎？<script setup>中就不用寫return就可以在template中使用text。

與<script>不同的常用用法
這裡再來簡單整理一下自己實務上比較常碰到的幾個與<script>不同的用法。
一、在子元件上定義props
一般用法中，定義props的方式是在export default裡面定義props，在<script setup>中，只要寫import defineProps來定義props即可。
一般<script>

<script setup>

如果想要定義這個msg的預設值，也是可以用以下的方法在定義Props的時候進行設定。

也可以透過const props來讓在template使用時，明確知道自己現在正在使用的內容是從props傳來的內容。

二、在子元件上定義emit
一般用法中，不需要另外在子元件中定義emit就可以使用，但在<script setup>中，就一定要做定義emit的這個動作。
一般<script> (子元件的部分)

<script setup> (子元件的部分)

沒有defineEmit的話，會跳出以下的錯，所以用<script setup>，一定要defineEmit。

三、父層想取得子層ref
一般用法中，想要在父層取得ref的ref，只需要一路給他"點"下去就可以一層一層取得ref，但如果在<script setup>中，就必須多進行defineExpose的動作，否則就無法取得子層的ref內容。
一般<script>
view(父層)

component(子層)

子層沒有特別做其他的動作，父層就可以透過parentRef.value.childRef來取得子層h1標籤的內容。
<script setup>
view(父層)

component(子層)

在<script setup>的寫法中，如果沒有先在子層defineExpose，父層就無法取得子層h1標籤的內容。

以上就是這陣子用<script setup>最常會遇到的三種用法，其他就真的是很單純的不用特別寫return，所以寫起來就變得比較便利，不再有忘記return而產生出的問題。
可以稍微比較以下上方幾個例子的行數，也可以一眼就發現行數少了很多，如果想讓自己少寫幾行程式碼的話，不妨可以試試看<script setup>的寫法！

好啦！這次的小小筆記就在這裡結束啦，寫些打家，打家掰掰！！:）