摘要

<script setup> 是 Vue 3 中編寫組合式 API 的一種編譯時語法糖。它極大地簡化了程式碼，讓定義響應式狀態和邏輯變得更簡潔、更直觀。

定義與說明

使用 <script setup> 後，你不再需要編寫 setup() 函數並手動 return。在 <script setup> 頂層作用域中宣告的所有變數、函數和引入的元件，都會被自動暴露給模板使用。這是目前 Vue 3 官方最推薦的寫法。

實作範例

Vue SFC

// 傳統 setup() 寫法：
<script>
import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return { count };
  }
}
</script>

// 使用 <script setup> (推薦)：
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
</template>

結論

<script setup> 提供了更少的樣板程式碼和更好的開發體驗。它讓組合式 API 的程式碼更接近標準的 JavaScript/TypeScript 模組，是所有新 Vue 3 專案的首選。

script setup 語法糖組合式 API