2025-02-13- Vue 3 Composition API 語法糖_script_setup

Vue 3 提供了兩種寫法來撰寫 <script>：

---

🧠 為什麼要用 setup？

✅ script setup 是 Vue 3 Composition API 的語法糖（Syntactic Sugar）

它讓你寫 Composition API 更簡潔、直覺，不需要手動定義 setup() 函數，也不需要 return。

---

🔍 比較：傳統 Composition API vs script setup

👴 傳統寫法（需要 return）

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello Vue!')
    return { message } // ⬅️ 一定要 return 出來，才能在 template 用
  }
}
</script>

---

🚀 script setup 寫法（不需要 return）

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue!') // ⬅️ 直接寫，不需要 return
</script>

---

✨ 優點總結

項目	傳統 setup()	script setup
是否要手動 return？	✅ 要	❌ 不用
語法長度	比較多	更簡潔
開發體驗	普通	更快、更直觀（特別適合小型元件）
支援自動引入名稱	❌	✅ Volar / IDE 支援更好

---

✅ 建議

你現在用的是 Vue 3 + Vite → 官方建議直接用 script setup ✅

---