setup 语法糖核心要点

2401_837088502025-08-23 16:32

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，让组件编写更简洁，但需要插件支持组件命名。