在 Vue 3 中，它引入了一个 <script setup>功能。它是编译时语法糖，用于在单个文件组件中使用组合 API。此语法允许开发人员定义组件，而无需从 JavaScript 代码块中导出任何内容。它向模板公开其所有顶级绑定。长话短说，这种语法使单文件组件更简单，让你觉得你正在使用原生JavaScript代码。
用RFC的确切措辞来说，“该提案的主要目标是通过直接向模板公开 <script setup>上下文来减少单文件组件（SFC）中组合API使用的详细程度。
<script setup>和 <script>之间的主要区别
- 性能
<script setup>具有更好的运行时性能，因为它将模板编译为具有相同作用域且没有中间代理的呈现方法。<脚本>使用中间代理编译模板。 - 代码语法
在<脚本>块中，我们需要导出带有样板代码的模块。<script setup>允许我们定义组件，而无需导出任何内容。在<script setup>块中，我们可以使用更少的样板文件获得更简洁的代码。 - 执行流程
<脚本>块在我们首次导入组件时执行。<script setup>块将在每次创建组件实例时执行。 - 组织代码
我们可以根据<script setup>块中的业务逻辑来组织代码。使用<script>块是不可能的，因为我们必须遵循Vue的选项API或组合API的编码结构。
使用组件
我们只需要导入component即可在模板中使用它们，因为编译器会自动将它们添加到我们的应用程序中。我们可以使用PascalCase或kebab-case作为模板中的组件名称。但是，强烈建议使用 PascalCase 的组件名称以保持一致性。它还有助于与本机自定义元素区分开来。
（图片 — 1）将组件与<脚本设置一起使用>
向模板公开的顶级绑定
<script setup>向模板公开其所有顶级绑定（包括变量、方法和导入）。我们可以在模板表达式中直接使用导入的帮助器方法，而不必通过 methods 选项公开它。
（图片 — 2）使用脚本设置时向模板公开的顶级绑定<>
使用递归组件
单个文件组件可以通过其文件名隐式引用自身。例如，文件名为 ListRenderer.vue 的组件可以在其模板中将自己称为< ListRenderer />。
（图片 — 3）具有<script setup>的递归组件
（图片 — 4）具有<script setup>的递归组件
使用动态组件
所有导入的组件都作为变量引用，因此我们可以将它们与 ：is 绑定一起使用，以便在模板中进行动态组件绑定。
（图片 — 5）带<script setup>的动态组件演示
使用生命周期挂钩
我们可以使用 onX 方法注册组件的生命周期钩子，我们可以从 vue 库中导入这些方法。
（图片 — 6）在 <script setup>中使用生命周期挂钩
Reactivity API（反应）
需要使用Reactivity API 创建反应式状态。例如，在模板中引用引用时，会自动解开引用。
（图片 — 7）带<script setup>的Reactivity demo
使用 Emits（发出）
要定义发出，我们需要使用定义Emits API方法，该方法完全支持类型推断。defineEmits 接受与发出选项相同的值。
（图片 — 8）将 emits 与<script setup>一起使用
（图片 — 9）将 emits 与<script setup>一起使用
使用Props（道具）
要定义 props，我们需要使用 defineProps API 方法，该方法完全支持类型推断。defineProps 接受与 props 选项相同的值。
（图片 — 10）将pops与<script setup>一起使用
根据官方文档，我们不需要在<script setup>中导入defineProps和definedEmits。但是，如果您在未导入的情况下使用它们，则将面临no-undef error的错误。
以下解决方案可以帮助您克服no-undef的问题：
- 使用 Vite 创建 Vue 项目。（探索更多)
（Image — 11） 使用 Vite 创建 Vue 项目
- 在 ESLint 配置文件中添加以下规则。（探索更多)
（图片 — 12）用于修复无取消定义错误的 ESLint 配置
用watch应对变化
我们可以通过 Vue 提供的watch选项对数据更改做出反应。当我们想要执行异步或成本高昂的操作以响应更改时，这是最有用的。
（图片 — 13）将watch 与<script setup>一起使用
使用Computed计算属性
我们可以声明一个计算属性，该属性根据属性或数据更改而随时自动更新。
（图片 — 14）将computed计算属性与<script setup>
使用普通的<script> 和<script setup>
<script setup>可以与普通的<script >一起使用，因为<script setup>为其顶级绑定创建自己的作用域。Vue 将为你混合在一起，所以你的组合代码和选项代码保持独立。
当我们需要必须在模块范围内执行的代码时，在某些情况下需要一个普通的<script>。一些指针如下：
- 声明无法在<脚本设置>中表示的选项，例如 inheritAttrs
- 通过插件启用的自定义选项
- 声明命名导出
- 运行副作用或创建只应执行一次的对象
- 像Nuxt这样的框架为标准选项API语法提供了额外的方法，这些方法在<script setup>中未公开
（图片 — 15）将 <script> 和<script setup>结合使用
（图片 — 16）将 <script> 和<script setup>结合使用