一、前言：Vue 的兩種 API 風格

Vue 提供了兩種編寫組件邏輯的方式：組合式 API (Composition API) 和 選項式 API (Options API)。理解這兩種方式的區別和適用場景，對于 Vue 開發者至關重要。

為什么會有兩種 API？

• 選項式 API：Vue 2 的傳統方式，按照選項（data、methods 等）組織代碼
• 組合式 API：Vue 3 引入的新方式，基于函數組合邏輯，更適合復雜組件

二、選項式 API (Options API) 詳解

1. 基本結構

<script>
export default {// 數據選項data() {return {count: 0,message: 'Hello Vue!'}},// 計算屬性computed: {reversedMessage() {return this.message.split('').reverse().join('')}},// 方法methods: {increment() {this.count++}},// 生命周期鉤子mounted() {console.log('組件已掛載')}
}
</script><template><div><p>{{ message }}</p><p>反轉: {{ reversedMessage }}</p><button @click="increment">計數: {{ count }}</button></div>
</template>

2. 選項式 API 的特點

• 按選項組織代碼：將代碼分為 data、methods、computed 等固定選項
• this 上下文：通過 this 訪問組件實例
• 隱式響應式：data 返回的對象自動成為響應式
• 適合簡單組件：邏輯較少時結構清晰

3. 生命周期鉤子

export default {beforeCreate() {},created() {},beforeMount() {},mounted() {},beforeUpdate() {},updated() {},beforeUnmount() {},unmounted() {}
}

三、組合式 API (Composition API) 詳解

1. 基本結構（<script setup> 語法）

<script setup>
import { ref, computed, onMounted } from 'vue'// 響應式狀態
const count = ref(0)
const message = ref('Hello Vue!')// 計算屬性
const reversedMessage = computed(() => {return message.value.split('').reverse().join('')
})// 方法
function increment() {count.value++
}// 生命周期鉤子
onMounted(() => {console.log('組件已掛載')
})
</script><template><div><p>{{ message }}</p><p>反轉: {{ reversedMessage }}</p><button @click="increment">計數: {{ count }}</button></div>
</template>

2. 組合式 API 的特點

• 基于函數：通過導入函數實現各種功能
• 邏輯組合：可以自由組織相關代碼
• 顯式響應式：需要明確使用 ref/reactive
• 更好的 TypeScript 支持：類型推斷更自然
• 邏輯復用：可以提取和重用邏輯（組合函數）

3. 核心響應式 API

API	用途	選項式 API 對應物
ref	創建基本類型的響應式數據	data 中的基本類型
reactive	創建對象的響應式代理	data 中的對象
computed	創建計算屬性	computed 選項
watch	監聽響應式數據變化	watch 選項
watchEffect	自動追蹤依賴的響應式效果	-

4. 生命周期鉤子對照

選項式 API	組合式 API
beforeCreate	不需要（直接寫在 setup 中）
created	不需要（直接寫在 setup 中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted

四、兩種 API 的深度對比

1. 代碼組織方式

選項式 API：

export default {data() { /*...*/ },    // 數據computed: { /*...*/ }, // 計算屬性methods: { /*...*/ },  // 方法watch: { /*...*/ }     // 監聽器
}

組合式 API：

// 功能A相關代碼
const { x, y } = useFeatureA()// 功能B相關代碼
const { a, b } = useFeatureB()

2. 邏輯復用對比

選項式 API 復用（mixins）：

// mixin.js
export default {data() {return {mixinData: 'Mixin Data'}},methods: {mixinMethod() { /*...*/ }}
}// 組件中使用
import myMixin from './mixin.js'
export default {mixins: [myMixin]
}

組合式 API 復用（組合函數）：

// useFeature.js
export function useFeature() {const state = ref(null)function doSomething() { /*...*/ }return { state, doSomething }
}// 組件中使用
import { useFeature } from './useFeature.js'
const { state, doSomething } = useFeature()

3. 類型支持對比

• 選項式 API：類型推斷有限，特別是在使用 mixins 時
• 組合式 API：天然支持 TypeScript，類型推斷更準確

五、何時使用哪種 API？

選項式 API 適合：

• 小型到中型項目
• 簡單組件開發
• 熟悉 Vue 2 的開發者
• 需要快速原型開發時

組合式 API 適合：

• 大型復雜項目
• 需要更好邏輯組織的組件
• 需要邏輯復用的場景
• TypeScript 項目
• 團隊希望統一代碼風格

六、組合式 API 進階技巧

1. 自定義組合函數示例

// useCounter.js
import { ref } from 'vue'export function useCounter(initialValue = 0) {const count = ref(initialValue)function increment() {count.value++}function decrement() {count.value--}function reset() {count.value = initialValue}return {count,increment,decrement,reset}
}

組件中使用：

<script setup>
import { useCounter } from './useCounter'const { count, increment } = useCounter(10)
</script><template><button @click="increment">Count: {{ count }}</button>
</template>

2. 異步狀態管理

<script setup>
import { ref } from 'vue'const data = ref(null)
const loading = ref(false)
const error = ref(null)async function fetchData() {loading.value = trueerror.value = nulltry {const response = await fetch('/api/data')data.value = await response.json()} catch (err) {error.value = err} finally {loading.value = false}
}// 立即獲取數據
fetchData()
</script>

3. 組件通信

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'const msg = ref('Hello from parent')
</script><template><Child v-model="msg" />
</template><!-- Child.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script><template><input:value="modelValue"@input="$emit('update:modelValue', $event.target.value)"/>
</template>

七、遷移策略：從選項式到組合式

1. 漸進式遷移

• 新組件使用組合式 API
• 舊組件逐步重構
• 混合使用（在選項式組件中使用 setup 選項）

2. 對應關系記憶卡

選項式 API	組合式 API
this	不需要，直接訪問變量
data()	ref() 或 reactive()
methods	普通函數
computed	computed()
watch	watch() 或 watchEffect()
生命周期鉤子	onXxx() 系列函數
props	defineProps()
emits	defineEmits()
mixins	組合函數

八、常見問題解答

1. 兩種 API 可以混用嗎？

可以，但不推薦。在 Vue 3 中，你可以在組件中使用 setup() 選項來使用組合式 API，同時保留其他選項。

2. 組合式 API 更難學嗎？

對于 Vue 新手，選項式 API 可能更容易上手。但有其他框架經驗的開發者，組合式 API 可能更直觀。

3. 性能有差異嗎？

兩種 API 在性能上沒有顯著差異，組合式 API 在某些場景下可能有輕微優勢。

4. 公司項目該用哪種？

新項目推薦組合式 API，舊項目可以逐步遷移。團隊統一風格最重要。

九、總結

Vue 的兩種 API 風格各有優勢：

• 選項式 API：結構清晰，學習曲線平緩，適合簡單場景
• 組合式 API：靈活強大，便于邏輯復用和組織，適合復雜場景

建議開發者：

1. 先掌握選項式 API 理解 Vue 核心概念
2. 逐漸過渡到組合式 API
3. 根據項目需求和個人偏好選擇合適的方式
4. 大型項目推薦統一使用組合式 API

組合式 API 代表了 Vue 的未來發展方向，特別是對于復雜應用和需要良好 TypeScript 支持的項目。選項式 API 仍會長期支持，適合維護舊項目和簡單場景。

創作不易，如果您都看到這里了，可以給我一個點贊、收藏并關注一下么？您的支持與喜愛是激勵我創作的最大動力！

如果內容有誤請及時聯系我進行修改！