Vue 3 的 setup 语法糖，全称是 一、核心本质（一句话理解）setup 语法糖 = 自动生成 setup()` 函数 + 自动暴露变量/方法给模板 + 自动注册导入的组件，无需开发者手动编写这些样板代码，实现“写得更少、跑得更快”的开发体验。
二、核心特点（与传统 setup() 函数的区别）
1. 无需手动 return，自动暴露给模板
在 // setup 语法糖（简洁高效） // 声明响应式变量，自动暴露给模板 const count = ref(0) // 声明方法，自动暴露给模板 const increment = () => count.value++ <template> `` <button @click="increment">点击计数：{{ count }}</button> `` </template> // 传统 setup() 函数（繁琐冗余） <script> import { ref } from 'vue' export default { setup() { const count = ref(0) const increment = () => count.value++ // 必须手动 return，否则模板无法访问 return { count, increment } } } ``2. 组件自动注册，导入即使用导入的子组件无需在 components` 选项中手动注册，导入后可直接在模板中使用，不仅减少代码量，还能提升运行时性能——编译时直接绑定组件，避免中间代理环节，运行更高效。
<script setup>
// 导入子组件，自动完成注册
import MyButton from './MyButton.vue'
import MyCard from './MyCard.vue'
</script>
<template>
<MyCard>
<MyButton>点击按钮</MyButton>
</MyCard>
</template>
3. 更优的性能与更友好的类型支持
4. 组件实例创建时自动执行与普通 三、核心用法（极简实操示例）1. 响应式数据使用直接使用 ref、reactive 等组合式 API 声明响应式数据，模板中可直接访问，无需手动解包（无需 .value），语法简洁易懂，上手成本低。
<script setup>
import { ref, reactive } from 'vue'
// 基础类型响应式
const msg = ref('Hello Vue 3 setup 语法糖')
// 引用类型响应式
const user = reactive({ name: 'Vue', version: '3.4.21' })
// 修改响应式数据
const updateMsg = () => msg.value = '修改后的内容'
</script>
<template>
<div>{{ msg }}</div>
<div>版本：{{ user.version }}</div>
<button @click="updateMsg">修改文本</button>
</template>
2. 接收 props 和触发自定义事件
使用 defineProps 声明组件接收的 props，defineEmits 声明组件可触发的自定义事件，语法简洁且类型友好，无需额外配置，轻松实现组件间通信。
<script setup>
// 声明 props（支持类型约束和默认值）
const props = defineProps({
title: { type: String, default: '默认标题' },
count: { type: Number, required: true }
})
// 声明自定义事件
const emit = defineEmits(['update:title', 'click'])
// 触发自定义事件
const changeTitle = () => {
emit('update:title', '新标题')
emit('click', props.count + 1)
}
</script>
3. 暴露方法/变量给父组件
默认情况下，<script setup> import { ref } from 'vue' const isShow = ref(false) const open = () => isShow.value = true const close = () => isShow.value = false ```` // 显式暴露给父组件，父组件可通过 ref 访问 defineExpose({ open, close, isShow }) </script>`四、注意事项不支持与 Options API 混用：this 不可用：顶层 await 支持：与普通 <script> 共存：一个单文件组件中可同时存在 兼容性：仅支持 Vue 3.2 及以上版本，若项目使用低版本 Vue 3，需升级版本后才能使用 setup 语法糖。五、总结setup 语法糖不是 Vue 3 的新功能，而是“编译期的语法简化工具”，核心价值是减少组合式 API 的样板代码，让开发者更专注于业务逻辑，同时提升组件性能和开发体验。目前，`
