有別於Options API，Vue 3新增另一種單文件組件設計方式—組合式API（Composition API），雖有許多優於Options API的特色，但程式仍是稍為囉嗦，例如要在「setup」函式明確回傳「ref」或「reactive」變數，才可以在模板（Template）之中使用。Vue 3.2版新增加的<script setup>語法，又可簡化組合式API「setup」函式的基礎程式碼。

<script setup>是在寫單文件組件（Single-File Components，SFCs）檔案，並使用Composition API開發時的編譯階段語法糖，比起使用<script>標籤，<script setup>提供了更簡潔的樣板程式，此外還讓你可用純TypeScript語法來宣告props與事件，並具有更佳的執行時期效能，以及在開發階段，讓IDE開發工具能有更好的型別推論（type-inference）效能。根據官方的文件建議，若同時使用SFCs與Composition API，建議使用<script setup>來取代<script>標記的語法。

在這篇文章之中，我們將介紹Vue.js <script setup> 基本語法，讓您了解到如何定義變數、宣告函式以及匯入、載入組件。

建立Vue專案

本文以使用Vite工具程式建立Vue專案為例，參考以下語法，在命令提示字元使用「npm init」指明要建立一個新的vue專案：

npm init vue@latest

這個命令的執行結果參考如下，接著會跳出一些問題來設定專案想支援的功能，我們將專案命為「demo」：

圖 1：建立專案的設定。

接著按照命令提示字元顯示的提示，使用「cd」切換到「demo」所在資料夾：

cd demo

在命令提示視窗輸入以下指令，安裝專案相依的插件：

npm install

這個命令執行的結果請參考下圖所示：

圖 2：安裝套件

接著便可以在命令提示視窗輸入以下指令，啟動開發階段的網站伺服器，並執行該網站：

npm run dev

開發階段的網站伺服器會動態賦予網站一個埠號，以本例來說，接聽在「5173」埠，開啟瀏覽器，輸入以下網址與埠號就可以看到範本網站請參考下圖所示：

圖 3：範例網站

第一個<script setup>範例

專案建立完成後，在專案「src\components」資料夾中新增一個「MyHome.vue」組件。以下是「MyHome.vue」組件程式碼，說明使用<script setup>最簡單的一種方式，只要在檔案中加入一個<script >區段套用「setup」attribute便可，我們在<script setup>區段中使用「console.log」印出訊息到瀏覽器除錯視窗：

src\components\MyHome.vue

<template>
  <h1> Home </h1>
</template>
<script setup>
    console.log( 'setup' )
</script>
<style  scoped>
</style>

<script setup>區塊的位置可以放在vue檔案中任意地方，例如以下「MyHome.vue」組件程式碼，可先定義<script setup>區段，然後再定義<template>區段：

src\components\MyHome.vue

接著修改專案根組件「App.vue」檔案程式碼，在<script setup> 區段中可以直接使用「import」關鍵字，將「MyHome.vue」組件匯入使用，不需要額外的組態設定，就可以在樣板之中直接使用：

src\App.vue

「MyHome.vue」組件一執行，瀏覽器除錯視窗主控台便會印出｢setup｣訊息，這個範例程式的執行結果參考如下：

圖 4：<script setup>執行範例。

<script setup>標籤中的程式碼將會編譯到「setup()」函式中，上例「MyHome.vue」組件程式等同於以下程式碼：

src\components\MyHome.vue

使用<script setup>區塊和使用<script>區塊的不同點在於：<script>區塊只有在組件第一次匯入時執行一次，而<script setup>區塊的程式碼，則在每次建立組件實例時都會執行。

同樣的，若使用<script>區塊與Composition API，則「App.vue」組件的寫法參考如下，需要使用「import」關鍵字匯入並使用「components」屬性註冊組件，相較之下，<script setup> 程式要精簡許多：

src\App.vue

定義變數

在<script setup>區塊中定義的變數、常數、函式，以及從其它模組匯入的成員都可以直接在模板（Template）中使用，例如以下「MyHome.vue」組件程式碼定義了一個「name」常數：

src\components\MyHome.vue

這個範例程式的執行結果參考如下：

圖 5：定義常數。

若將上例「MyHome.vue」組件轉換成使用<script>區塊與傳統的Composition API，則程式的寫法如下：

src\components\MyHome.vue

從範例中可以發現，使用<script setup>區塊語法較使用<script>區塊簡潔，不需要使用「return { name }」便可以在模板中直接使用宣告的變數。

定義函式宣告（function declaration）

除了變數之外，函式宣告（function declaration）、匯入（imports），這些通稱為綁定（Binding），都可以直接在樣板中使用，底下「MyHome.vue」組件程式碼範例定義一個「sayHello」函式，並直接在模板叫用這個函式：

src\components\MyHome.vue

這個範例程式的執行結果參考如下：

圖 6：定義函式。

自訂Composition 函式

我們也可以將「sayHello」函式程式碼移動到「src\composition\utilities.js」模組檔案之中，在函式前方使用「export」關鍵字匯出函式：

src\composition\utilities.js

這樣可以讓多個組件共用程式碼。我們可在「MyHome.vue」組件中使用「import」關鍵字匯入「sayHello」函式，同樣可以直接在模板中叫用「sayHello」函式：

src\components\MyHome.vue

這個範例的執行結果和上例一致。

加入響應式能力（Reactivity）

使用「ref」或「reactive」函式可以讓宣告的變數具備響應式能力（Reactivity），在<script setup>區塊定義的「ref」變數可以直接在模板中使用，不必透過「value」屬性，例如以下「MyHome.vue」組件範例程式碼：

src\components\MyHome.vue

這個範例程式的執行結果參考如下，當組件第一次載入時，會顯示「employeeName」、「age」、「isMarried」的值：

圖 7：使用ref。

當按下畫面中的按鈕後，利用程式修改的值會直接同步更新到模板中顯示，這個範例程式的執行結果參考如下：

圖 8：響應式能力（Reactivity）測試。

使用組件

在<script setup>區段可以直接使用「import」語法匯入組件使用，例如有一個「MyEmployee」組件程式如下：

src\components\MyEmployee.vue

<script setup>
    import { ref } from 'vue'
    const employeeName = ref( "mary" );
    const age = ref( 50 );
    const isMarried = ref( true );
</script>
<template>
  <p> Employee Name : {{ employeeName }} </p>
  <p> Age : {{ age }} </p>
  <p> Is Married : {{ isMarried }} </p>
</template>
<style  scoped>
</style>

在「MyHome.vue」組件可以直接使用「import」語法匯入「MyEmployee.vue」組件，在模板中使用了kebab-case命名法插入「MyEmployee」組件，請參考以下範例程式碼：

src\components\MyHome.vue

不過據官方文件的建議，使用自訂組件時建議採用PascalCase命名法，便於區別是否為Vue內建的組件。可將「MyHome.vue」組件程式改寫如下：

src\components\MyHome.vue

這個範例程式的執行結果參考如下：

圖 9：使用組件。

動態載入組件

有時可能根據程式的需要，需要利用程式碼動態載入組件來執行，在模板中可以利用「component」標籤進行定位，動態載入的組件會插入「component」標籤所在的位置。例如有一個「MyCustomer.vue」組件程式如下：

src\components\MyCustomer.vue

在「MyHome.vue」使用「component」標籤與「:is」綁定語法關聯到要載入的組件，組件的名稱「MyEmployee」、「MyCustomer」就可以當做參數在「:is」之中使用，請參考以下「MyHome.vue」組件範例程式碼：

src\components\MyHome.vue

這個範例程式的執行結果參考如下：

圖 10：動態載入組件。