一：概述

在使用vue3项目中，我们可以快捷方便的写<script setup>，那么，他的作用是什么呢？

二：是什么

（1）定义：

是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

（2）优势：

更少的样板内容，更简洁的代码。

能够使用纯 TypeScript 声明 props 和自定义事件。

更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数，避免了渲染上下文代理对象)。

更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

三：怎么用

（1）：语法

<script setup>
console.log('hello script setup')
</script>

（2）：说明

内部内容会被编译成组件 setup() 函数的内容，每次组件实例被创建的时候执行

顶层的绑定会被暴露给模板，任何在 <script setup> 声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用

四：总结

1：<script setup> 是 Vue3 的语法糖，简化了组合式 API 的写法，其实是实现了 “顶层的绑定”。

2：在 setup 中声明的属性和方法无需 return，就可以直接在模板使用

3： 引入组件的时候，会自动注册，无需通过 components 手动注册

4：默认不会对外暴露任何属性和方法，如果要暴露的话就要使用 defineExpose，可以使用 defineProps 接收父组件传递的值，defineEmits 定义自定义事件

5：useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件，defineExpose 对外暴露

五：拓展

（1）<script setup> 和 <script>区别？

普通的 <script> 只会在组件第一次被引入的时候执行一次

而 <script setup> 中的代码会在每次组件实例被创建的时候执行