摘要

setup 是 Vue 3 組合式 API (Composition API) 的心臟與入口點。所有響應式狀態、計算屬性、偵聽器和生命週期鉤子等邏輯，都是在這個函數內部進行組織和定義的。

定義與說明

setup 是一個在元件建立之前執行的特殊函數，它發生在 beforeCreate 和 created 這兩個傳統生命週期鉤子之前。它是組合式 API 的核心，我們在這裡集中定義元件的響應式資料和方法。setup 函數最後需要 return 一個物件，該物件中的所有屬性都會被暴露給模板（<template>）和其他選項（如 methods）使用。

注意：

在現代 Vue 3 開發中，我們更推薦使用 <script setup> 語法糖，它極大地簡化了 setup 函數的寫法，但理解 setup 的運作原理依然至關重要。

實作範例

Vue SFC

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

export default {
  // 這就是 setup 函數
  setup() {
    // 1. 在 setup 中定義響應式資料
    const count = ref(0);

    // 2. 在 setup 中定義方法
    function increment() {
      count.value++;
    }

    // 3. 將資料和方法 return 出去，這樣模板才能使用它們
    return {
      count,
      increment
    };
  },
  // mounted() { ... } // 其他選項依然可以使用
}
</script>

<template>
  <button @click="increment">點擊次數: {{ count }}</button>
</template>

結論

setup 函數是組合式 API 的邏輯容器。它提供了一個集中的地方來組織功能相關的程式碼，是實現邏輯複用與更優結構的基礎。雖然現在有更簡潔的 <script setup>，但其背後的概念都源自於 setup 函數。

setup 組合式 API 響應式