script setup 是 Vue 3 默认推荐的 SFC 写法，为编译时语法糖，简化组合式 API：自动暴露顶层声明、自动解包 ref/computed、直接调用生命周期与 watch、组件工具函数免注册、TS 类型即用即推。
script setup 是 Vue 3 默认推荐的单文件组件（SFC）写法，它不是运行时功能，而是编译时语法糖，能把组合式 API 的使用大幅简化——不用写 setup() 函数、不用 return、不用手动暴露变量和方法，逻辑更聚拢，代码更干净。
直接声明响应式状态，无需 return
在 <script setup> 中，用 ref、reactive、computed 等创建的响应式数据，只要定义在顶层，就会自动暴露给模板，模板里直接用变量名即可，value 解包也由编译器自动处理。</script>
- ref 定义基础类型或对象，模板中读取时自动解包：
count可直接写{{ count }}或@click="count++" - reactive 定义对象，保持响应式结构，模板中可直接访问属性：
const user = reactive({ name: 'Alice', age: 25 })→{{ user.name }} - computed 返回的是 ref，同样自动解包，可像普通 ref 一样使用
生命周期钩子和副作用函数直接调用
不需要包裹在 setup() 函数里，也不用从 setup 返回，导入后直接调用即可，执行时机与传统 setup 中一致。
- onMounted、onUnmounted、onUpdated 等直接 import 并使用：
onMounted(() => { console.log('mounted') }) - watch 和 watchEffect 同样直接使用，依赖追踪和清理机制照常工作
- 所有钩子和监听器都绑定到当前组件实例，无需额外上下文管理
组件与工具函数自动暴露，免注册免代理
import 进来的组件、工具函数、类型定义，全部默认可在模板中直接使用，省去 options API 中的 components、methods、filters 等显式配置。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 自定义组件：直接 import 并在模板中以 PascalCase 标签名使用，无需 components 选项注册
- 工具函数：如
import { formatDate } from '@/utils'，模板中可直接{{ formatDate(date) }} - Props 和 emits 支持 TypeScript 原生声明，用 defineProps / defineEmits 编译时校验，不依赖运行时选项
支持 TS 类型即用即推，开发体验更稳
搭配 TypeScript 使用时，defineProps 和 defineEmits 的泛型参数能被 IDE 精准识别，props 类型、emit 事件名、参数结构都有完整提示和校验。
- defineProps —— 模板中
{{ title }}有类型提示 - defineEmits —— 触发 emit 时参数数量和类型受约束
- IDE 能直接跳转、自动补全、报错提醒，减少手误和运行时异常
不复杂但容易忽略：它本质是语法糖，背后仍是组合式 API；所有代码在每次组件实例化时重新执行，行为与 setup() 函数体内一致。用熟了，写组件就像写一段逻辑清晰的脚本，而不是拼装一堆分散的配置块。
