<script setup>作为setup方法的语法糖，在书写上更加简洁方便，无需再手动书写setup(){}，可直接在script标签中书写setup的内容，并且无需做return返回

一、ref和reactive的使用

同setup一样，需要手动引入ref和reactive；ref用于基本数据类型的响应式，reactive则用于复杂数据类型

ref和reactive的基本使用

二、组件的使用

所有在该标签的声明的顶层的绑定 (包括变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用

组件引入无需注册即可直接使用

三、defineProps 和 defineEmits

该标签内声明props和emit时需要使用difineProps和defineEmits方法，这两个方法只在<script setup>内有效，并且使用时无需引入

子组件

子组件props和emit

父组件

父组件

效果展示，defineProps定义的数据正常的从父组件传到子组件并展示，点击子组件的按钮，调用父组件函数，控制台打印“麦兜和佩奇”

效果展示

四、defineExpose

vue3可利用expose结合ref来让父组件使用子组件的数据（可对数据进行修改），但需要子组件使用defineExpose将其暴露出来（该方法无需引入），未暴露的数据父组件将无法获取使用

子组件定义两个数据一个方法，将其中一个数据和方法使用defineExpose暴露出

子组件

父组件使用ref获取数据，并需要手动定义一个数据

父组件

点击按钮后，被expose抛出的数据会正常打印，并且可被修改，未抛出的数据会显示undefined；被抛出的方法也可正常执行

效果展示

五、useSlots 和 useAttrs

这两种方法在使用前必须引入，本身与setupContext.slots 和 setupContext.attrs作用相同，用于获取slots和attrs的值

打印slots和attrs 效果展示

六、混合使用

<script setup> 和普通的<script>可在一个文件中混合使用

七、await

<script setup>中可以使用顶层await，代码实际会编译成async setup()