一、使用与不使用 script setup 的对比
1、不使用 script setup 的繁杂性
我们之前的组件可能是这样的：
<template>
<div>
<Card>{{msg}}</Card>
</div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import Card from "./components/Card.vue";
export default defineComponent({
components: {
Card,
},
setup() {
const msg = ref("setup script");
return { msg };
}
});
</script>
这里做了两件事，一个是导入并注册组件，一个是导出一个字符串给template使用。
如果模板上要使用的这些变量，必须要在 setup 返回的对象中定义。暴露变量必须 return 出来，如果我们内容很多的话，那么这个 setup 就会返回很多值，动辄十几二十行，也是挺繁琐的。有没有更简单的办法，于是 script setup 语法出现。使用这个语法只需要在 script 标签上加上 setup 属性。
2、script setup 使用：启用setup script之后是这样的
vue3.2 将这个之前的实验功能变为正式功能，在单文件组件中引入了一种新的脚本类型：< script setup >。
<script lang="ts" setup>
import { ref } from "vue";
import Card from "./components/Card.vue";
const msg = ref("setup script");
</script>
这里省去了组件的注册步骤，也没有显式的导出变量的动作。你只需要在script上配置setup即可。
<script setup>
import { ref } from 'vue'
// 像在平常的setup中code，但是不需要返回任何变量
const count = ref(0)//在此处定义的count可以直接在模板html中引用
const inc = () => {//函数也可以直接引用,而不用返回
count.value++
}
</script>
<template>
<Foo :count="count" @click="inc" />
</template>
当 <script> 标签具有 setup 属性时，组件在编译的过程中代码运行的上下是 setup() 函数中。所有ES模块导出都被认为是暴露给上下文的值，并包含在 setup() 返回对象中。
其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行，然后把导出的变量定义到上下文中，并包含在返回的对象中。
二、如何使用 script setup 语法
1、导出变量和方法：在setup script里面定义的所有变量都会自动导出，非常方便。
2、使用组件：所有的组件导入即可自动注册。
需要注意一点的是：如何定义组件名 => name？
在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主。
如果需要定义类似 name 的属性，可以再加个平级的 script 标签，在里面实现即可。
3、使用 props - defineProps：使用 props 需要用到defineProps来定义，具体用法跟之前的 props 写法类似。
通过 defineProps 指定当前 props 类型的同时，获得上下文的props对象。
在 script中 需要 props[key] 引用，而 template 中可直接调用 key。
<script lang="ts" setup>
import { defineProps } from "vue";
const props = defineProps(['title', 'content']);
</script>
// 给props定义类型：
const props = defineProps({
title: String,
content: {
type: Stirng,
required: true
}
});
// 使用TS的注解的方式：
defineProps<{
title?: string
content: string
}>();
4、使用 emits - defineEmit：使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit
使用 defineEmit 对组件里面使用到的事件进行验证和定义，具体用法跟之前一样。
const emit = defineEmit(['onHeaderClick'])
emit('onHeaderClick', 'params')
// 还可以对事件进行验证
const emit = defineEmit({
onHeaderClick: ({title}) => {
if(!title) {
console.warn('Invalid title')
return false
}
return true
}
})
5、使用 context - useContext：使用 useContext 获取上下文。
可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots
import { useContext } from 'vue'
const { slots, attrs } = useContext()
// 获取到的slots attrs跟之前的setup里面的是一样的。
6、使用Slots和Attrs：需要useSlots, useAttrs
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>
7、指令：指令跟组件一样，导入自定注册。
<script setup>
import {color as superColor} from './v-color'
</script>
<template>
<div v-super-color />
</template>
// 导入的 color 重命名为 superColor，并自动映射为指令v-super-color
8、defineExpose API
传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template 模板，谁都不能访问内部的数据和方法。
如果需要对外暴露 setup 中的数据和方法，需要使用 defineExpose API。示例：
<script setup>
import { defineExpose } from 'vue'
const a = 1
const b = 2
defineExpose({
a
}) // 将 a 暴露出去
</script>
三、setup 目前存在的限制
1、配置项的缺失：修改选项配置需要单开一个 script
有时候我们需要更改组件选项，在 setup 中我们目前是无法做到的。我们需要在上方再引入一个 script，在上方写入对应的 export 即可。
<script>
export default {
name: 'YourName',
inheritAttrs: false,
customOptions: {},
}
</script>
<script setup>
// your code
</script>
注意：Vue 3 SFC 一般会自动从组件的文件名推断出组件的 name。在大多数情况下，不需要明确的 name 声明。唯一需要的情况是当你需要 <keep-alive> 包含或排除或直接检查组件的选项时，你需要这个名字。