必须用 而非普通 ，因其是编译时语法糖，自动暴露顶层声明、省略 return 和 setup 函数，提升简洁性、类型安全与可维护性。
Vue 单文件组件（SFC）中使用 <script setup></script> 语法糖，不是锦上添花，而是现代 Vue 3 开发的默认路径。它把组合式 API 的优势真正落地为简洁、类型安全、高可维护的代码结构。
为什么必须用 <script setup></script> 而非普通 <script></script>
普通 <script></script> 需手动导出默认对象、显式调用 setup()、处理返回值绑定，样板多且易错。<script setup></script> 是编译时语法糖，所有顶层声明（ref、computed、defineProps、defineEmits 等）自动暴露给模板，无需 return，也不用 setup() { return { ... } }。
- 模板中直接使用
count，不用写setup() { const count = ref(0); return { count }; } - 响应式逻辑与模板渲染天然同域，阅读顺序更符合“先定义、后使用”的直觉
- IDE 类型推导更准，TS 编译器能直接分析顶层作用域，不依赖运行时代理对象
Props 和 Emits 的类型化声明要写在顶层
不能在函数内部或条件块里调用 defineProps 或 defineEmits，它们是编译时宏，必须位于 <script setup></script> 的最外层作用域。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 正确写法：
const props = defineProps() - 带默认值：用
withDefaults包裹，如withDefaults(defineProps(), { age: 18 }) - 事件声明：用
const emit = defineEmits()，支持函数重载语义
scoped 样式 + CSS 变量配合更灵活
是 SFC 的标配，它通过属性选择器（如 data-v-f3f3eg9）实现样式隔离。但纯 scoped 有时难以覆盖子组件或第三方 UI 库的内部样式。
- 推荐搭配 CSS 自定义变量：在
中定义--card-bg: #fff，再在子元素中用background: var(--card-bg) - 需要穿透 scoped 时，用
:deep(.el-button)（对子组件）、:global(.reset-style)（全局注入）、:slotted(h2)（作用于插槽内容） - 避免滥用
!important，优先用层级或:deep()明确意图
逻辑复用靠组合式函数，不是 mixins 或作用域插槽
当多个组件共享状态或行为（如表单校验、分页控制、用户权限），应提取为独立的 useXxx 函数，放在 composables/ 目录下。
- 函数内部用
ref、computed、onMounted等组合式 API - 导出解构后的响应式数据和方法，如
const { list, loading, fetchList } = useListApi('/users') - 不污染组件命名空间，不产生隐式 this 绑定，测试友好，类型可精确推导
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
