Hi Dai Gei Ho~ 我是 Winnie ～ 在今天文章中，我們要來說說 Composition API 中的 <script setup>

什麼是 script setup ？

script setup 是 Vue3 中所提供的 語法糖，使用方式非常簡單，只要在 script 標籤加上 setup 就可以了，作用如 setup()一樣，所有的變數、函式 都可以直接給模板(template)使用，不需要再return
如下方範例：

 <template>
 <div>{{name}}</div>
 </template>
 <script setup>    
     import { ref } from "vue"
     const name = ref('winnie')
 </script>

是不是很簡單，而更方便的是在 script setup中會自動註冊引入的元件，也就是說，它會以檔名為主作為元件，這樣就不用再寫name屬性來定義了。

範例如下:

    <template>
        <HelloWorld />
    </template>

    <script setup>
    import  HelloWorld from './HelloWorld.vue'
    </script>

其中一般的<script>只會在第一次導入時被執行，而<script setup>會在每一個元件實體被創建實執行。

另外小提醒：

在模板(template)引入元件時，無論是 kebab-case 還是 PascalCase命名方式都是可以使用的，但在官方文件主要還是建議 以PascalCase的方式來保持一致性，因為這樣可以更好區分自定義元件。

defineProps 和 defineEmits

defineProps 和 defineEmits 主要 是用來 在<script setup>定義 props 與emits，而其中這兩個接受的值與我們過去定義props 與 emits 的值相同。

用法如下：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

useSlots 和 useAttrs

針對 $slots與$attrs ，官方文件有提到 通常 會直接通過 模板來使用它，不過當你需要在<script setup>中使用 它們時，可以引入 useSlots和useAttrs來讀取。

用法如下:

    <script setup>
    
        import { useSlots, useAttrs } from 'vue'
        const slots = useSlots()
        const attrs = useAttrs()
        
    </script>

與一般 script 一起使用

另外當我們需要使用一個一般<script>時，可以在元件中同時聲明<script>和<script setup>，但注意在元件中只能各聲明一個。

用法如下：

    <script>
        export default({
          name: "ComponetA"
        })
    </script>
    
    <script setup>
        const name =ref('winnie')
    </script>

以上就是關於 Vue3 script setup語法糖常見使用方法介紹，一樣還是那句話，如果大家對script setup使用方法有更多興趣，歡迎到官方文件去細細品嚐喔，如果有任何問題歡迎大家多多指教，謝謝大家。

ps. 雖然語法糖很好用，但偷偷說 我個人還是比較喜歡寫原本的語法，因為對我來說 程式碼易讀性比較高。

這也讓我想到之前上課的時候，五倍紅寶石的龍哥 說過的一句話：雖然是慣例，但你也可以選擇不要跟著慣例走，偶爾照自己想法做，搞不好還做得更好。(超有個性超喜歡，自己還偷偷筆記了XD)

所以這句話也送給大家，希望大家還是可以找到適合自己習性來選擇來使用。