Vue script setup
Vue3 中 script setup 的定位、优势，以及它和 Composition API、编译期宏之间的关系。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
Vue script setup
script setup 常被说成“语法糖”，但它不是单纯少写几行代码，而是 Vue3 主流组件写法的一部分。
一句话定义
script setup 是 Vue3 为 Composition API 提供的单文件组件语法形式，它把组件内可直接暴露给模板使用的逻辑，变成了更贴近组合式开发的写法。
它解决什么问题
- 减少模板和
setup()返回值之间的样板代码 - 让组件逻辑更自然地按功能组织
- 更方便配合
defineProps、defineEmits、defineModel等编译期宏使用
为什么它和 Composition API 经常一起出现
- Composition API 解决的是逻辑组织方式
script setup解决的是组件里如何更顺手地写这种组织方式- 两者经常一起使用，但不是同一个层级的概念
它最典型的体验变化
- 不再手动写
setup()和return - 顶层声明的变量、函数、导入可以直接给模板使用
- 更像在组件里直接写一段组合式逻辑脚本
常见误区
- 以为
script setup就等于 Composition API 本身 - 以为它只是更短，没有带来开发模型变化
- 为了跟风统一写法，却没有理解宏和组件边界
最短记忆方式
Composition API 解决“怎么组织逻辑”，script setup 解决“怎么把这种逻辑更顺手地写进组件里”。
面试要点
来自 vue-script-setup-interview-question 的面试视角整理。
一句话回答
script setup 的价值在于减少 setup() + return 这类样板代码，让 Composition API 的状态、方法和导入可以更直接地组织在组件里，并更自然地配合 defineProps、defineEmits 这类宏声明组件边界。
最稳的回答主线
- 先说它服务于 Composition API 写法
- 再说它减少样板代码和返回样式负担
- 再说它让宏声明组件接口更顺手
- 最后补一句：它不只是更短，而是更贴近 Vue3 主流组织方式
面试里容易加分的一句
script setup 解决的不是“少打几个字”，而是把组件逻辑组织、模板暴露和接口声明放进了一套更统一的写法里。
常见追问
script setup和 Composition API 是什么关系- 顶层变量为什么可以直接在模板里使用
- 它和普通
setup()有什么区别
最短记忆方式
它让 Composition API 写法更自然，不只是更短。