<script setup> 是 Vue 3 引入的一種新的腳本語法，它提供了一種更簡潔和聲明式的方式來編寫組件邏輯。它是為了解決傳統 <script> 標簽在 Vue 單文件組件（SFC）中的一些局限性而設計的。

<script setup> 與 <script> 標簽的主要區別：

<script setup> 的特點：

1. 組合式 API：<script setup> 強制使用組合式 API，這是 Vue 3 推薦的方式來組織組件邏輯。

2. 更少的樣板代碼：不需要 export default 來暴露組件選項。

3. 自動引入：在 <script setup> 中定義的變量、函數等會自動在模板中可用，無需使用 ref 或 reactive 顯式聲明響應式狀態。

4. 更好的類型推斷：TypeScript 支持更直接，不需要額外的類型聲明。

5. 更清晰的邏輯復用：通過組合式 API，邏輯可以更容易地在組件之間復用。

<script> 的特點：

1. 選項式 API：使用 <script> 標簽時，你可以選擇使用選項式 API 或組合式 API。

2. 需要 export default：在 <script> 中，你需要使用 export default 來定義組件選項。

3. 顯式響應式聲明：使用 ref、reactive、computed 等函數顯式聲明響應式狀態。

4. 模板綁定：在模板中使用響應式狀態時，需要通過 {{ }} 插值或 v-bind 來綁定。

使用時的寫法區別：

使用 <script setup>：

<script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}
</script><template><button @click="increment">{{ count }}</button>
</template>

使用 <script>：

<script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return { count, increment };},
};
</script><template><button @click="increment">{{ count }}</button>
</template>

在 <script setup> 中，count 和 increment 函數直接在模板中可用，而在 <script> 中，它們需要通過 return 語句從 setup 函數中返回，以便在模板中使用。

總的來說，<script setup> 提供了一種更現代、更簡潔的方式來編寫 Vue 組件，它鼓勵使用組合式 API，并且減少了樣板代碼。隨著 Vue 3 的普及，<script setup> 可能會成為編寫 Vue 組件的主流方式。