<script setup> 是 Vue 3.2+ 官方推荐的编译时语法糖，简化 Composition API 使用、提升类型推导精度与性能；需用 ref/reactive 创建响应式数据，props/emits 通过 defineProps/defineEmits 声明，组件方法需 defineExpose 暴露，组合式 API 需显式导入。
script setup 是 Vue 3.2+ 官方推荐的默认写法，它不是运行时特性，而是编译时语法糖，让 Composition API 的使用更简洁、类型推导更精准、性能更优。用对了，代码量减少约 30%，TS 类型自动识别率接近 100%；用错了，容易报 TypeError: Assignment to constant variable 或响应式失效。
基础写法：省掉 return，顶层即暴露
在 <script setup> 中，所有顶层声明的变量、函数、导入的组件，都会自动暴露给 <template> 使用，无需 return，也不需要 this。
- 响应式数据必须用
ref()、reactive()等 API 显式创建，普通let count = 0不是响应式的 -
ref在模板中自动解包：{{ count }}直接写，不用{{ count.value }} - 修改值仍需
.value：count.value++，不能写count = 5（const 声明不可重新赋值） - 导入的组件（如
import Child from './Child.vue'）在模板中直接使用<Child />，无需components: { Child }
Props 和 Emits：用宏函数声明，类型即文档
defineProps 和 defineEmits 是编译时宏，不需 import，直接调用即可，支持完整 TypeScript 类型推导。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- Props 推荐对象写法，可设
type、required、default：title: { type: String, required: true } - Vue 3.5+ 支持安全解构：
const { title, likes } = defineProps(...)，解构后仍是响应式（无需toRefs） - Emits 用
defineEmits(['update:modelValue', 'submit'])或类型化写法：defineEmits<{ (e: 'change', value: string): void }>() - 不要在
setup()函数里写 props 处理逻辑——<script setup>中没有传统 setup 函数上下文
常见报错与修复：高频坑点直击
新手最容易卡在这几个地方，修复方式简单但必须明确原理：
立即学习“前端免费学习笔记（深入）”；
-
“Cannot assign to const”：把
count.value = 10错写成count = 10→ 记住ref返回的是对象，const锁的是引用，不是内部值 -
props 修改没更新视图：直接解构后又赋新值，如
let title = props.title; title = 'new'→ 这样会切断响应性，应始终通过props.title读取，或用computed包装 -
子组件方法调用失败（undefined）：未用
defineExpose暴露方法 → 子组件需显式写defineExpose({ fn, data })，父组件才能通过ref调用 -
生命周期钩子不执行：写了
onMounted(() => {...})但没 import → 所有组合式 API（onMounted、watch、computed）都需从'vue'显式导入
进阶技巧：提升可维护性的小细节
真正拉开效率差距的，往往藏在细节里：
- 用
useCssModule()启用 CSS Modules，<style module>中的类名可被 JS 拿到并动态绑定 - 结合
defineOptions({ name: 'MyButton' })显式命名组件，利于调试和递归组件场景 - 复杂逻辑可抽为
composable（组合式函数），<script setup>中直接 import 调用，天然支持 TS 类型穿透 - 需要访问组件实例时（如手动 focus），用
getCurrentInstance()，注意开发/生产环境分别对应ctx和proxy
