在之前我们学习的setup函数中，我们要先定义一个数据，然后在setup中return它才能在模板中使用，这样每增加一个数据或者方法，还要至少修改两处代码，有点麻烦。
现在如果我们使用script setup语法糖就可以再简化一点代码，关于script setup语法糖，官网上说有一下几个优点：

• 更少的样板内容，更简洁的代码。
• 能够使用纯 Typescript 声明 props 和抛出事件。
• 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
• 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
  对我们普通开发者来说，就一项能让代码更简洁就有足够的理由让我们来学习一下script setup语法糖了。

基本语法

在我们的单文件组件中，script标签上直接加上setup属性就行了。在组件初始化时，会自动执行script里面的代码。

<script setup>
// 这里的代码会在组件每次初始化时执行
</script>

在模板中使用

在script标签里面，最外层定义的变量和方法可以直接在模板template中使用，不用在return了。
比如，我们定义一个msg变量和一个onClick方法，可以直接绑定在模板中：

<template>
  <div @click="onClick">
    {{ msg }}
  </div>
</template>

<script setup>
const msg = '我是林哥'
function onClick() {
  console.log(msg)
}
</script>

页面显示：

点击这个div，然后控制台会输出：

我是林哥

说明我们的变量和方法都正确绑定了，这样是不是比以前setup函数中还得返回方便多了。

甚至import进来的变量或者函数都可以直接绑定在模板中，
比如我们随便写了一个方法，打印当前的时间：
time.js

export default function getTime() {
  console.log(Date.now())
}

然后在App.vue中使用，只要import，就可以直接绑定在模板中了：

<template>
  <div @click="getTime">
    {{ msg }}
  </div>
</template>

<script setup>
import getTime from './time'
const msg = '我是林哥'
</script>

点击后，控制台就可以打印当前时间。

响应式

同样可以使用ref定义响应性的变量

<template>
  <div @click="onClick">
    {{ msg }}
  </div>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('我是林哥')  // 新增
const onClick = () => {
  msg.value = msg.value + ',今年18' // 新增
}
</script>

有些代码，我们原来是写在setup函数之外，我们怎么来实现呢？

使用组件

之前使用components选项定义
现在直接使用import导入组件后，就可以在模板中使用了，以我们之前做的titleBar组件为例：

<template>
  <div>
    <titleBar title="页面标题"></titleBar>
  </div>
</template>

<script setup>
import titleBar from './components/titleBar' // 导入组件
</script>

定义props

原来使用porps选项定义，
现在使用defineProps来定义

<script setup>
import { defineProps, onMounted } from 'vue'
const props = defineProps({
  // 定义props
  title: {
    type: String,
    default: '',
  },
})
onMounted(() => {
  console.log(props.title) // 获取props里的值
})
</script>

定义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语法糖可以简化我们的代码，还是很方便的。