Vue语法糖＜script setup＞详解，用最快的方式让你看懂和＜script＞的区别

前言

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 './***ponents/School.vue'
 import School as mySchool from './***ponents/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语法糖，可以自行前往官网查看。