在之前我们学习的setup函数中，我们要先定义一个数据，然后在setup中return它才能在模板中使用，这样每增加一个数据或者方法，还要至少修改两处代码，有点麻烦。
现在如果我们使用script setup语法糖就可以再简化一点代码，关于script setup语法糖，官网上说有一下几个优点：
- 更少的样板内容，更简洁的代码。
- 能够使用纯 Typescript 声明 props 和抛出事件。
- 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
- 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
对我们普通开发者来说，就一项能让代码更简洁就有足够的理由让我们来学习一下script setup语法糖了。
基本语法
在我们的单文件组件中，script标签上直接加上setup属性就行了。在组件初始化时，会自动执行script里面的代码。
在模板中使用
在script标签里面，最外层定义的变量和方法可以直接在模板template中使用，不用在return了。
比如，我们定义一个msg变量和一个onClick方法，可以直接绑定在模板中：
{{ msg }}
页面显示：
点击这个div，然后控制台会输出：
我是林哥
说明我们的变量和方法都正确绑定了，这样是不是比以前setup函数中还得返回方便多了。
甚至import进来的变量或者函数都可以直接绑定在模板中，
比如我们随便写了一个方法，打印当前的时间：
time.js
export default function getTime() {
console.log(Date.now())
}
然后在App.vue中使用，只要import，就可以直接绑定在模板中了：
{{ msg }}
点击后，控制台就可以打印当前时间。
响应式
同样可以使用ref定义响应性的变量
{{ msg }}
有些代码，我们原来是写在setup函数之外，我们怎么来实现呢？
使用组件
之前使用components选项定义
现在直接使用import导入组件后，就可以在模板中使用了，以我们之前做的titleBar组件为例：
定义props
原来使用porps选项定义，
现在使用defineProps来定义
定义emits
原来使用emits选择定义
现在使用defineEmits来定义
const emit = defineEmits(['change']) // 定义了change事件，并返回了emit方法，用于发送事件
const onClick = () => {
emit('change') // 调用emit方法发送事件
}
定义要暴露的属性
之前我们用过setup函数的第二个参数context，它有一个expose方法，用于暴露属性或者方法，
现在使用defineExpose方法：
const logTitle = () => { // 定义一个打印标题的方法
console.log(props.title)
}
defineExpose({ // 暴露后，在父组件中获取到这个组件的实例，就可以调用这个方法了
logTitle,
})
基本上常用的功能就是这些，使用script setup语法糖可以简化我们的代码，还是很方便的。