一、核心作用
1. 简化 Composition API 语法
- 自动暴露顶层变量：无需手动通过
return暴露属性或方法，直接声明即可被模板使用。<script setup> const count = ref(0); // 自动暴露给模板 </script> <template><p>{{ count }}</p> </template> - 省略
setup函数定义：直接编写顶层代码，减少样板代码量。
2. 自动注册组件与指令
- 组件自动注册：导入的组件无需在
components选项中声明，直接使用。<script setup> import Child from './Child.vue'; // 自动注册 </script> <template><Child /> <!-- 直接使用 --> </template> - 指令自动支持：全局指令（如
v-model）可直接使用，本地指令需符合命名规范（如vMyDirective）。
3. 增强 TypeScript 支持
- 类型推断：直接声明变量类型，无需在
props或emits中重复定义。<script setup lang="ts"> const props = defineProps<{ msg: string }>(); // 类型自动推断 </script> - 类型安全的 Props/Emit：通过
defineProps和defineEmits实现强类型校验。
4. 优化生命周期钩子
- 直接调用生命周期函数：无需在
setup()中注册，代码更简洁。<script setup> import { onMounted } from 'vue'; onMounted(() => { console.log('Mounted!'); }); </script>
5. 逻辑复用与组合
- 组合式 API 原生支持：直接使用
ref、reactive、computed等，逻辑更集中。 - 自定义 Composable 函数：封装可复用逻辑（如
useFetch），提升代码模块化。
6. 性能优化
- 编译时优化：模板编译为与
<script setup>同一作用域的渲染函数，减少运行时代理开销。 - 减少中间层：避免传统
setup()的返回对象代理，直接绑定顶层变量。
二、对比传统写法的优势
| 场景 | 传统 Composition API | <script setup> |
|---|---|---|
| 变量暴露 | 需手动 return |
自动暴露，无需 return |
| 组件注册 | 需在 components 中声明 |
自动注册 |
| 类型支持 | 需手动定义接口 | 编译器自动推断类型 |
| 生命周期钩子 | 需通过 setup() 注册 |
直接调用（如 onMounted） |
| 逻辑复用 | 依赖 mixins 或高阶组件 |
原生支持 Composable 函数 |
三、典型使用场景
- 新项目开发
- 快速搭建组件结构，减少样板代码。
- 复杂组件逻辑
- 通过顶层绑定和组合式 API 集中管理状态。
- TypeScript 项目
- 利用类型推断提升代码健壮性。
- 组件库开发
- 简化 API 设计，降低用户学习成本。
四、注意事项
- 变量私有化：以下划线开头的变量默认不暴露（如
_privateVar）。 - 与普通
<script>混合：若需使用传统选项（如inheritAttrs），需在普通<script>中声明。 - SSR 兼容性：需配合
vue-server-renderer的特定配置。
总结
<script setup> 通过 编译时语法糖 和 顶层绑定机制，解决了传统 Composition API 的冗余代码问题，同时提升了类型支持和运行时性能。它是 Vue 3 中编写组件的 推荐方式，尤其适合追求代码简洁性和开发效率的场景。