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，讓組件編寫更簡潔，但需要插件支持組件命名。
