Vue3.2+中setup语法糖的使用总结
vue3.2+ 使用setup语法糖
vue3已经出来很长时间了，这一版本的写法在很多场景下由于要频繁return我们所定义的属性或者方法会让代码看起来非常繁琐，于是在3.2版本之后加入了script-setup语法糖，这一语法糖的加入让vue3的写法有了特别大的改变，这里是setup script文档：文档地址
如果你还不是很了解vue3，建议先看看这篇入门知识 万字长文带你全面掌握Vue3 ，再来了解setup-script语法糖会更加明了，直接学习这个语法糖可能会让你在之后产生很多误解，推荐你循序渐进，
使用前准备
在我们使用vue3之前需要先对编辑器做一些调整，因为版本导致的语法变更，我们需要更换一个插件来使用，禁用掉v2的vetur，并使用v3的Volar，
再新建一个tsconfig.json / jsconfig.json 文件 ，在compilerOptions里面加上 "strict": true，和 "moduleResolution": "node" 配置项就可以啦
{
"compilerOptions": {
"baseUrl": ".",
"strict": true,
"moduleResolution": "node",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"],
"@views/*": ["src/views/*"]
},
"allowJs": true
},
"exclude": ["node_modules", "dist"]
}什么是setup语法糖
对比用传统写法呢减少了大量的return，因为vue3中很多定义或者导入的东西都需要return出来才能在template中使用，在有了setup语法糖之后，组建就只需要引入而不用注册，属性和方法也不需要返回就可以直接使用，也不在需要再自己定义setup函数了，也不需要export default了，包含自定义指令也可以我们的template中自动拿到了。
基础用法
使用其语法非常简单，只需要在script后面加上setup什么其为setup语法糖即可，传统写法中，我们需要在setup中去定义这个变量，和方法，并且在最后return，我们在这里写个简单的demo对比一下吧。
基础写法
<template>
<MyComponent/>
{{ count }}
<button @click="addCount">add</button>
</template>
<script>
import MyComponent from './components/mycomponent'
import { ref } from "vue";
components: {
MyComponent
},
export default {
setup() {
const count = ref(0);
const addCount = () => (count.value += 1);
return { count, addCount };
},
};
</script>setup写法
<template>
{{ count }}
<button @click="addCount">add</button>
</template>
<script setup>
import MyComponent from './components/mycomponent'
import { ref } from "vue";
const count = ref(0);
const addCount = () => (count.value += 1);
</script>可以对比一下看看
- 不再需要使用export default导出了，写在setup语法糖就会自动帮你导出
- 不再需要使用setup生命周期了，setup本身相对于vue2中就是beforeCreate和create，在这里我们需要对vue2中的这些data,methods,watch,computed进行定义，并且需要return返回才能使用，而在语法糖中也不需要使用这个生命周期了，组件在编译的过程中代码运行的上下是setup() 函数中，。所有ES模块导出都被认为是暴露给上下文的值，并包含在 **setup()**返回对象中。
- 不再需要对定义的变量进行return了，我们定义的ref变量可以在template直接使用了。
- 组建导入也不需要注册了，只需要导入即可。
但是呢，我们知道，例如setup接收第一个参数是props，用于接收props，也就是定义在组件上的属性（同vue2),但是接收的props必须先在props属性中定义，否则是不会被接收到的，在这样的语法糖中我们没办法去拿到，所以我们还需要其提供的一些专属于setup-script语法糖的API
>>> 特殊 API 的使用
使用 props
通过defineProps指定当前 props 类型，获得上下文的props对象。示例：
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
name: String,
})
</script>使用 emits
使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。示例：
<script setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['name', 'age'])
</script>使用slots 和 attrs
官方提到<script setup> 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中通过
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>使用自定义指令
全局指令的使用依然是正常使用的，同时组建内自定义的指令也同样可以使用。和组建是相同规则！
但是这里有一个限制，在当前组建内定义这个指令的时候必须使用官方规定的命名格式， vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
<script setup>
const vMyDirective = {
beforeMount: (el) => {// 在元素上做些操作}
}
</script>
<template>
<h1 v-my-directive>This is a Heading</h1>
</template>
/* 导入指令的形式 */
<script setup>
// 导入的指令同样能够工作，并且能够通过重命名来使其符合命名规范
import { myDirective as vMyDirective } from './MyDirective.js'
</script>使用组建
在语法糖中的组建是不需要定义的，导入即可直接使用，导入的组建名称即可作为标签名，也可以自己使用别名修改组建名
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template>
<MyComponent />
</template>使用动态组建
因为组建是被当做变量注册的，而不是字符串所以在使用的时候，应该把他当做变量而不是字符串,看看组建在三元表达式中是如何使用的：
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
<template>
<component :is="Foo" />
<component :is="someCondition ? Foo : Bar" />
</template>使用 defineExpose暴露属性
vue3新特性，如果是options api类型的组件，不声明 expose 时，默认暴露当前组件实例的全部内容，声明了 expose 选项， expose 数组内标记的才会暴露。（expose:[]则什么都不暴露，注意这个问题。也可以利用这个特性提高组件使用的规范。）
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({a,b})
</script>比如这样我们只暴露a,b两个属性，这种时候父组件如果通过ref获取到组建实例的时候就只能拿到这两个属性。
顶层Await
语法糖中默认最上层是async setup，也就意味着，在这个语法糖中我们可以直接await而不需要定义async
<script setup>
const res = await axios.get('https://xxxxxx.com')
</script>