Vue3 script setup语法糖使用教程

Vue 3.2+ 官方力推的 `script setup` 是一种编译时语法糖，它大幅简化了 Composition API 的使用流程——无需 `return` 暴露变量、自动解包 `ref`、零配置类型推导接近100%、代码量减少约30%，但必须严格遵循其规则：响应式数据需用 `ref`/`reactive` 显式创建，`props`/`emits` 必须通过 `defineProps`/`defineEmits` 声明，子组件方法要靠 `defineExpose` 才能被调用，所有组合式 API（如 `onMounted`、`watch`）都需显式导入；用对了清爽高效，用错了却极易触发“Cannot assign to const”或响应式失效等典型错误——掌握这些底层逻辑与高频避坑指南，才能真正释放 Vue 3 的开发效能。

script setup 是 Vue 3.2+ 官方推荐的默认写法，它不是运行时特性，而是编译时语法糖，让 Composition API 的使用更简洁、类型推导更精准、性能更优。用对了，代码量减少约 30%，TS 类型自动识别率接近 100%；用错了，容易报 TypeError: Assignment to constant variable 或响应式失效。

基础写法：省掉 return，顶层即暴露

在