前言

Vue3出来已经3年了，但是前两天在百度上搜索有关setup语法糖的细节时，发现很多博客关于语法糖细节部分，还是讲的很粗糙，因此决定自己来写一篇入门的博客，方便大家快速上手。

简介

它是Vue3中的一个语法糖，熟悉vue3脚手架的同学，应该一眼就能看出来，vite脚手架默认创建的模板项目中就使用了这个语法糖，说明官网也推荐我们去使用语法糖。

我们都知道，setup是vue3中新增的属性，主要用来解决数据和方法的声明。
是setup的替代，我们之前在setup中声明的内容，现在都可以直接迁移。

作用

一言以蔽之，就是简化我们的书写，使用了这个语法糖之后，我们在中声明的任何数据、方法以及import内容都不必再次配置，可以直接在模板中使用。

配置

基础数据

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-buttontype="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语法糖，可以自行前往官网查看。