本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。
前言
<script setup>语法糖并不是新增的功能模块，它只是简化了以往的组合API的必须返回（return）的写法，并且有更好的运行时性能。
你不必担心setup语法糖的学习成本，他是组合式API的简化，并没有新增的知识点。你只需要了解一些用法和细微的不同之处，甚至比之前写setup()还要顺手！
可以看看的推荐
因为setup语法糖是vue3.2正式确定下来的议案，所以vue3.2的版本是真正适合setup语法糖的版本。
但是vue-cli中的vue版本还没有更新，而vite+vue的版本又没有内置vuex和vue-router。所以我把vite+vue3.2+vuex+vue-router的整体配置封装，写了一个npm包。全局安装的CL，包括js和ts两个版本，具体地址如下：vite-aei
一个栗子
我们以往使用setup()组件式API，往往是这样的：
<template>
这是响应式的数据：{{msg}}
</template>
<script>
import { ref } from "@vue/reactivity"
export default {
setup() {
const msg = ref('hello vue3')
return {
msg
}
},
}
</script>
于是，我们可以得到这样的页面：
如果我们使用setup语法糖来修改上面的代码，这会变得很简单，我们不需要返回和setup函数，只需要全部定义在<script setup>内即可：
<template>
这是响应式的数据：{{msg}}
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3')
</script>
这样我们便可以实现和上面的代码一样的功能：
(注：setup语法糖只能在vue3.2之后使用)
简单的用法示例
从ref开始
类似于上面的写法，ref是可以直接导出然后使用的：
<template>
这是响应式的数据：{{msg}}
</template>
<script setup>
import { ref } from 'vue'
const msg = ref('hello vue3.2')
</script>
其他的例如reactive, computed, watch等，也可以像以往一样正常导出然后使用即可：
<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { useRoute, useRouter} from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
store.state.name = 'xiaoming' //使用vuex
const msg = ref('hello vue3.2')
</script>
组件的导入
导入组件也非常简单，我们不需要再使用components进行注册，只需要导入，这一过程语法糖都将帮你自动完成：
<template>
<com-one/>
</template>
<script setup>
import comOne from '../components/comOne.vue'
</script>
props和emits
props和emits在语法糖中使用defineEmits和defineProps方法来使用。
这里直接用一个例子，来说明props和emits在setup语法糖中的具体用法：
comone(子组件):
<template>
<div>
{{title}}
<button @click="toEmits">heihei</button>
</div>
</template>
<script setup>
//defineExpose,defineProps无需导入，直接使用
const emits = defineEmits(['get'])
const props = defineProps({
title:{
type:String,
defaule:'defaule one'
}
})
const toEmits = ()=>{
emits('get')
}
console.log(props.title) //打印title属性
</script>
home.vue(父组件)：
<template>
<com-one title="one" @get="fn" />
</template>
<script setup>
import comOne from '../components/comOne.vue'
function fn() {
window.alert('you click!')
}
</script>
attrs和slots
在Vue3中，attrs和slots是在setup传入的context中的，现在这两个方法被独立出来，分别使用useslots和useattrs调用。
由于从script中获取slots的用法很少用（高情商：少用，低情商：鸡肋）所以这里就跳过了。
直接看attars怎么用：
<script setup>
import { useAttrs } from "vue";
const {onFun} = useAttrs()
console.log(useAttrs())//查看父组件传来的自定义属性
</script>
如果有同学对attrs和emits的用法区别还有些疑惑，可以查看这篇文章： Vue3中emits和attrs的区别 - 掘金 (juejin.cn)
对外暴露属性
<script setup> 的组件默认不会对外部暴露任何内部声明的属性。如果有部分属性要暴露出去，可以使用 defineExpose
// 子组件
<script setup>
let name = ref("son")
defineExpose({ name });
</script>
// 父组件
<Chlid ref="child"></Chlid>
<script setup>
let child = ref(null)
child.value.name //获取子组件的aaa
</script>
其他
其他的功能如slot等，都和之前没有差别，正常使用即可。
总结
这篇文章没有官方文档权威，但是用几个小例子来概述了在setup语法糖的具体用法，对未接触过语法糖的同学更加友好和实用。如果想了解官方文档的更多内容，可以查看： 单文件组件 | Vue.js (vuejs.org)。
对了，如果你喜欢这篇文章，不妨关注我，一起学习，一起进步😆
