Day_23: 让 Vite 来开启你的Vue 之 <script setup>

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)

所以这句话也送给大家，希望大家还是可以找到适合自己习性来选择来使用。