---

前言

setup() 函數是 Vue 3 中 Composition API 的核心入口，它在組件生命周期中扮演了非常關鍵的角色。

---

? 一、setup() 函數的作用是什么？

setup() 是在組件創建之前執行的一個初始化函數，用來：

功能類別	作用簡述
響應式狀態聲明	創建 ref、reactive 等響應式變量
邏輯封裝	封裝業務邏輯為函數（或導入 composables）
生命周期注冊	使用 onMounted、onUnmounted 等注冊生命周期邏輯
計算屬性	使用 computed() 定義依賴狀態的衍生值
props & emit	接收組件的 props，并通過 emit 觸發自定義事件
返回模板綁定對象	返回的數據/方法可以直接在模板 <template> 中使用

---

? 二、setup() 什么時候執行？

setup() 會在 組件初始化 時（比 created 更早）執行 一次，并且只執行一次。

執行順序如下：

beforeCreate -> setup() -> created -> beforeMount -> mounted

?? 注意：在 setup() 中不能訪問 this，因為組件實例還未創建完成。

---

? 三、setup() 的參數

setup(props, context) {// props 是只讀的響應式對象// context 包含三個屬性：attrs、slots、emit
}

參數	類型	說明
props	響應式	傳入組件的 props，不能解構（會失去響應式）
context	普通對象	包含 attrs（非 props）、slots、emit 等輔助項

---

? 四、setup() 中不能做什么？

• ? 不能訪問 this，因為組件實例還沒創建。
• ? 不能使用 data、methods、computed（Options API 的寫法）。
• ? 不建議直接修改 props（它是只讀響應式的）。

---

? 五、常見用法示例

import { defineComponent, ref, onMounted } from 'vue'export default defineComponent({props: {title: String},setup(props, { emit }) {const count = ref(0)const increment = () => {count.value++emit('update', count.value)}onMounted(() => {console.log('組件掛載', props.title)})return { count, increment }}
})

---

? 六、總結（適合背誦或面試回答）

setup() 是 Vue 3 中組件邏輯的統一入口，在組件創建前執行，用于定義響應式狀態、邏輯封裝、生命周期注冊、事件觸發等，是 Composition API 的核心支點。

---

<script setup> 是 Vue 3.2+ 推出的語法糖

是對 setup() 函數的簡化寫法，專為提高開發效率和代碼可讀性而設計。

---

? 一句話總結：

<script setup> 就是把 setup() 函數**“自動內聯展開”，省略 defineComponent()、return {} 等冗余寫法，讓你寫的每一行代碼自動在 setup 環境中執行**。

---

? 二、它能干什么？

等價于你自己手寫的：

export default defineComponent({setup() {// ...return {}}
})

變成了這樣👇：

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

---

? 三、核心特性與優勢

特性	說明
自動注冊為 setup()	所有代碼都是在 setup() 中執行的，不用再寫 setup() 函數
不需要 return	所有聲明的變量/函數，自動暴露給模板 <template> 使用
支持宏命令	提供 <script setup> 獨有指令：defineProps()、defineEmits() 等
更少的樣板代碼	不需要寫 import { defineComponent }、setup(), return {} 等
更強的類型推導	更好配合 TypeScript 使用

---

? 四、與 defineComponent + setup() 對比

對比項	<script setup>	defineComponent + setup()
寫法簡潔性	? 更簡潔、無樣板代碼	? 模板多
模板中變量自動暴露	? 自動暴露，無需 return	? 需要手動 return
TypeScript 類型推導	? IDE 更智能	? 支持但稍顯繁瑣
可讀性	? 更易讀	? 模板化程度高
靈活性（命名組件）	? 不支持寫 name 字段（需額外用 defineOptions）	? 可以顯式命名

---

? 五、defineProps 和 defineEmits 示例

<script setup lang="ts">
const props = defineProps<{ title: string }>()
const emit = defineEmits<{(e: 'update', value: number): void
}>()function click() {emit('update', 42)
}
</script>

---

? 六、何時應該用 <script setup>？

場景	是否推薦用 <script setup>
Vue 3 + TypeScript 項目	? 強烈推薦
單文件組件 + 簡潔邏輯	? 更高效
組件邏輯復雜，需要分離	? 可以拆分成 composables
需要用 JSX	? 不支持 <script setup> JSX
遷移自 Vue 2	? 可逐步遷移簡化

---

🧠 面試總結推薦回答

<script setup> 是 Vue 3.2 引入的 SFC 編譯器語法糖，本質上是 setup 函數的展開，去掉了樣板代碼、提高了開發效率，自動暴露變量給模板、支持 defineProps/Emits，特別適合 TypeScript 項目與組合式邏輯拆分。

---