<script setup> 是 Vue 3 组合式 API 的编译时语法糖，自动暴露顶层声明、无需 return 和 setup 函数包装，支持 defineProps/defineEmits 类型化声明，ref/reactive 在模板中免 .value，TS 类型推断更精准。
Vue 3 的 <script setup> 是组合式 API 的语法糖，它不是新功能，而是对原有 setup() 函数的编译时简化。核心作用是省去显式声明函数、手动 return 暴露变量/方法、以及重复的导出结构，让逻辑更聚焦、代码更扁平。
自动暴露所有顶层声明
在 <script setup> 中，所有用 const、let、function 等声明的顶层绑定（非内部块作用域），都会自动暴露给模板和组件其他部分：
- 不需要写
return { count, handleClick } - 不用再包裹在
export default { setup() { ... } }结构里 -
ref、reactive、computed、onMounted等直接导入即用
无需手动处理 this 和上下文
传统 setup() 函数接收 props 和 context 参数，而 <script setup> 内部通过编译器自动注入：
- 使用
defineProps声明 props 类型，无需解构参数 - 使用
defineEmits声明事件，不需从 context 获取emit - 避免误用
this—— 它在<script setup>中不可访问，也无需访问
更自然的响应式写法
响应式变量定义后，在模板中直接使用，无需 .value；在 JS 中读写仍需 .value（ref）或直接属性访问（reactive）：
立即学习“前端免费学习笔记（深入）”；
-
const count = ref(0)→ 模板中写{{ count }}，脚本中写count.value++ -
const state = reactive({ a: 1 })→ 模板中写{{ state.a }}，脚本中写state.a = 2 - 计算属性、监听器、生命周期钩子都可直接调用，如
onMounted(() => {...})
支持 TypeScript 更简洁的类型推断
配合 defineProps 和 defineEmits，TS 类型能被精准识别，且无需额外类型断言：
const props = defineProps<{ msg: string; count?: number }>()const emit = defineEmits<{ (e: 'update', value: string): void }>()- 编辑器能实时提示 props 字段、emit 事件名，减少运行时错误
