Vue 3 的 <script setup> 是官方推荐的组合式 API 编写方式，自动暴露顶层声明、简化 Props/Emits 声明、支持顶层 await 和 import 别名，但不可与普通 <script> 共存且无法访问 this。
`）简化代码编写">
Vue 3 的 setup 语法糖（<script setup>）是官方推荐的组合式 API 编写方式，它能大幅减少样板代码，让逻辑更聚焦、导入更简洁、响应式声明更直观。
自动暴露变量和函数
在 <script setup> 中，所有顶层声明的变量、函数、响应式数据都会**自动暴露给模板使用**，无需再写 return 或 defineExpose（除非需要向父组件暴露方法）。
- 直接用
ref()、reactive()、computed()声明响应式状态 - 普通函数可直接在模板中调用：
@click="handleClick" - 组件内部定义的
defineEmits和defineProps也自动生效
简化 Props 和 Emits 声明
不再需要单独定义 props 选项对象或 emits 数组，改用编译时宏：
const props = defineProps({ title: String, count: { type: Number, default: 0 } })const emit = defineEmits(['update:modelValue', 'submit'])- 支持运行时声明（对象/数组）和类型声明（配合 TypeScript 更安全）
支持顶层 await 和 import 别名
<script setup> 支持顶层 await，异步组件初始化更自然；同时允许直接 import 并在模板中使用：
立即学习“前端免费学习笔记（深入）”；
-
const data = await fetch('/api/user').then(r => r.json())—— 组件会自动变成异步组件 -
import { useCounter } from '@/composables/useCounter'，解构后可直接在模板中用{{ count }}和{{ increment }} - 支持
import Foo from './Foo.vue'，模板中直接写<Foo />
注意作用域与限制
虽然简洁，但需留意几个关键约束：
- 不能与普通
<script>共存于同一组件（只能二选一） - 无法访问
this，所有逻辑必须基于组合式 API - 生命周期钩子需用
onMounted、onUnmounted等函数形式调用 - 若需向父组件提供方法，必须显式使用
defineExpose({ methodA })
