前言
Vue3出来已经3年了，但是前两天在百度上搜索有关setup语法糖的细节时，发现很多博客关于语法糖细节部分，还是讲的很粗糙，因此决定自己来写一篇入门的博客，方便大家快速上手。
<script setup>简介
它是Vue3中的一个语法糖，熟悉vue3脚手架的同学，应该一眼就能看出来，vite脚手架默认创建的模板项目中就使用了这个语法糖，说明官网也推荐我们去使用语法糖。
我们都知道，setup是vue3中新增的属性，主要用来解决数据和方法的声明。
<script setup>是setup的替代，我们之前在setup中声明的内容，现在都可以直接迁移。
作用
一言以蔽之，就是简化我们的书写，使用了这个语法糖之后，我们在<script>中声明的任何数据、方法以及import内容都不必再次配置，可以直接在模板<template>中使用。
配置
基础数据
setup语法糖有一个特点，相对于需要return来配置返回内容的setup属性，setup语法糖中可以不用返回。
例如，我简单配置了一个a变量和一个计数方法。
<script setup>
import { ElButton } from 'element-plus'
import { reactive, ref } from 'vue'
let a = ref(3);
let person = reactive({
name:'PYR',
age:17
});
const count = function(){
console.log('我被调用了')
this.a+=1;
}
</script>
<span>{{ a }}</span><br/>
<span>{{ person }}</span><br/>
<el-button type="primary" :plain="false" @click="count()">计数</el-button>
页面的效果如图所示：
ps:这里的element-ui不知道为什么失效了，不影响我们理解。
子组件
要配置子组件，我们只需要import引入即可，我们也可以对子组件取别名，这个不多赘述。
import School from './components/School.vue'
import School as mySchool from './components/School.vue'
props和emits的配置
关于emits属性，简单的说明一下，在vue3中需要在子组件中对绑定的自定义事件作出声明，否则会给出警告，emits属性即用来配置事件名。
配置props，需要用到一个方法defineProps（）。同理emits也有对应的方法defineEmits().
<script setup>
const props = defineProps({
name: String
})
const emit = defineEmits(['add', 'delete'])
// setup code
</script>
slot插槽和Attrs
这两个学过vue2的话，应该不陌生，slot插槽的作用是在子组件标签中插入dom元素，并且子组件能够配置slot来接受这些元素。Atrr则是接受props未收集的数据，在vue2中，获取的方式为 组件对象.$atrri 。
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
常用的配置就介绍完啦，如果想要更深入的了解setup语法糖，可以自行前往官网查看。
