<script setup> 是 Vue 3 SFC 中的编译时语法糖，自动暴露顶层声明供模板使用，省去 return、setup 函数和 components 注册；支持 ref/reactive 响应式、TypeScript 类型化 props/emits、直接 import 组件及工具函数调用。
script setup 是 Vue 3 单文件组件（SFC）中使用组合式 API 的编译时语法糖，它直接把顶层声明“自动暴露”给模板，省去 return、components 注册、setup 函数包裹等冗余步骤，让代码更聚焦逻辑本身。
基础写法：加 setup 属性即可启用
只需在 <script> 标签上添加 setup 属性，内部所有顶层变量、函数、import 内容都会自动可用于模板：
- 无需
export default或setup() { return {...} } - 组件实例每次创建时，
<script setup>中的代码都会重新执行（不是只执行一次） - 例如：
const count = ref(0)和function increment() { count.value++ }可直接在<template>中用{{ count }}和@click="increment"
响应式数据：用 ref / reactive 直接声明
响应式状态必须显式创建。Vue 会自动解包 ref 在模板中的使用，不需要写 .value：
-
const count = ref(0)→ 模板中写{{ count }}或@click="count++" -
const state = reactive({ name: 'Alice' })→ 模板中直接用{{ state.name }} - 计算属性、监听器也照常导入使用：
computed、watch、onMounted等都可直接调用
组件与 Props/Emits：零配置注册 + 类型即文档
组件和通信机制大幅简化：
立即学习“前端免费学习笔记（深入）”；
- 导入组件后可直接在模板中使用标签名，无需
components: { MyComp }注册 - Props 和 emits 支持原生 TypeScript 声明：
defineProps<{ title: string }>()、defineEmits<{ 'update:modelValue': [val: string] }>() - 动态组件用
<component :is="MyComponent" />，递归组件用文件名（如<SelfComponent />）
其他实用细节
一些高频但易忽略的点：
- 顶层 import 的工具函数（如
formatDate）可直接在模板表达式中调用：{{ formatDate(date) }} - 命名空间导入支持点语法：
import * as Form from './form-components'→<Form.Input></Form.Input> - 若需访问组件实例（如
this场景），可用getCurrentInstance()，但多数情况不需
