<script setup> 是 Vue 3.2+ 编译器原生支持的语法糖，无需配置即可启用；它自动暴露顶层声明的响应式变量、函数及导入组件，简化组合式 API 使用，提升逻辑聚拢性。
直接在单文件组件的 <script> 标签上加 setup 属性，就能启用组合式 API 语法糖。它不是插件或配置项，而是 Vue 编译器原生支持的语法特性，Vue 3.2+ 默认可用。
基础写法：声明即可用
所有顶层定义的响应式变量、函数、导入的组件，都会自动暴露给模板，无需 return 或 export default：
- 用
ref()管理基础类型（数字、字符串、布尔值），脚本中读写需.value，模板中自动解包，直接写{{ count }} - 用
reactive()管理对象或数组，操作属性或元素时不用.value，但不能直接赋值替换整个对象 - 普通函数（如事件处理）直接定义，模板中可直接调用，比如
@click="increment"
常用能力：按需引入、自动暴露
只需从 'vue' 按需导入需要的 API，它们在 <script setup> 中开箱即用：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
import { ref, reactive, computed, watch, onMounted } from 'vue'—— 所有组合式 API 都可直接使用 - 导入的组件（如
import MyButton from './MyButton.vue'）在模板中直接写<MyButton></MyButton> - 命名导出、别名导入、甚至
import * as Form from './form-components'都支持，模板中可用<Form.Input>
进阶用法：保持响应性与逻辑聚拢
组合式 API 的价值不只是写法简化，更在于让同一业务逻辑的代码自然靠近：
立即学习“前端免费学习笔记（深入）”；
- 筛选条件相关的
ref、watch、提交方法可以集中写在一起，不分散在data/methods/watch多个区块 - 对
reactive对象解构时，要用toRefs()保证响应性不丢失，解构后的变量才能在模板中响应更新 - 递归组件可直接用文件名引用自己（如
Tree.vue中写<Tree/>），但注意优先级低于显式import的同名组件
不需要额外配置，只要项目基于 Vue 3.2+，写 <script setup> 就是标准做法。它把开发重心从“按选项分类”转向“按功能组织”，代码读起来更像一条清晰的业务流。
