setup 语法糖核心要点
1. 基本语法
<!-- 传统写法 -->
<script lang="ts">
export default {setup() {let name = '张三'function changeName() { name = '李四' }return { name, changeName }}
}
</script><!-- 语法糖写法 -->
<script setup lang="ts">
let name = '张三'
function changeName() { name = '李四' }
// 无需 return，自动暴露给模板
</script>2. 关键特性
✅ 自动暴露
- 顶层变量、函数自动暴露给模板
- 无需手动 return
✅ 组件自动注册
<script setup>
import Person from './Person.vue'
// 无需在 components 中注册，直接使用
</script>
<template><Person/> <!-- 直接使用 -->
</template>✅ 编译器宏？
<script setup>
// Props 定义
const props = defineProps<{ message: string }>()// Emits 定义
const emit = defineEmits<{ 'my-event': [data: string] }>()// 暴露方法给父组件
defineExpose({ publicMethod })
</script>3. 组件名称问题
问题：<script setup> 无法直接设置组件名
<script setup name="Person"> <!-- ❌ 这样不行 -->解决方案：使用 Vite 插件
npm i vite-plugin-vue-setup-extend -D
// vite.config.ts
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [vue(), VueSetupExtend()]
})然后就可以：
<script setup name="Person"> <!-- ✅ 现在可以了 -->对比总结
| 特性 | 传统 setup() | <script setup> |
|------|-------------|------------------|
| 代码量 | 多（需要 return） | 少（自动暴露） |
| 组件注册 | 需要手动注册 | 自动注册 |
| 类型支持 | 一般 | 优秀 |
| 学习成本 | 中等 | 低 |
一句话总结：<script setup> 是 Vue 3 的"零配置"组合式 API，让组件编写更简洁，但需要插件支持组件命名。