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