Vue組件設計升級之Composition API和Options API的區(qū)別
一語點睛：組件不是邏輯堆疊，而是能力組合。
1、組件范式-框架設計思想的投影
Vue 中的一切皆組件，組件的編寫方式不僅影響開發(fā)效率，更是框架設計哲學的直觀體現(xiàn)。從 Vue2 的 Options API 到 Vue3 的 Composition API，這場變革不僅是代碼結構的調整，更是從“配置式開發(fā)”走向“組合式設計”的理念躍遷。
本文將以 Vue2 為歷史起點，通過對比與實戰(zhàn)，引導讀者理解 Vue3 組件設計的優(yōu)勢與挑戰(zhàn)，完成從使用者到設計者的思維轉變。
2、Vue2-Options API的結構與局限
結構清晰：新手友好、職責分明
Vue2 的 Options API 通過對象配置劃分組件職責，結構上包括：
export default {
data() {
return {
count: 0
}
},
computed: {
double() {
return this.count * 2
}
},
methods: {
increment() {
this.count++
}
},
watch: {
count(newVal) {
console.log('count changed:', newVal)
}
},
mounted() {
console.log('component mounted')
}
}每個功能點（數(shù)據(jù)、方法、副作用）都有對應的選項塊，初學者能快速上手，IDE 補全也較友好。
核心痛點：邏輯分散，難以聚合復用
- 同一功能被拆散在多個選項中：例如“倒計時”邏輯可能分布在
data、mounted、methods、watch中。 - 邏輯復用高度依賴 mixins：容易變量沖突、來源不明確。
- 生命周期鉤子分散：組件越大，邏輯越零散，閱讀難度倍增。
3、Vue3-Composition API的設計初衷與優(yōu)勢
setup()：組合邏輯的舞臺
Vue3 推出的 Composition API 將邏輯組織中心前置到了 setup() 中：
import { ref, computed, watch, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
const increment = () => count.value++
watch(count, (newVal) => {
console.log('count changed:', newVal)
})
onMounted(() => {
console.log('component mounted')
})
return {
count,
double,
increment
}
}
}更強邏輯聚合與復用能力
- 所有與“count”相關的邏輯集中書寫。
- 可提取為 composable（如
useCounter()），實現(xiàn)邏輯復用。 - 生命周期、響應式、副作用統(tǒng)一在頂層語義中聲明。
4、實戰(zhàn)對比-同一個計數(shù)器組件的兩種實現(xiàn)
Vue2 - Options API 版本
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
computed: {
double() {
return this.count * 2
}
},
watch: {
count(newVal) {
console.log('watch:', newVal)
}
},
mounted() {
console.log('mounted')
}
}Vue3 - Composition API 版本
import { ref, computed, watch, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const double = computed(() => count.value * 2)
const increment = () => count.value++
watch(count, (val) => console.log('watch:', val))
onMounted(() => console.log('mounted'))
return { count, double, increment }
}
}5、結構對比圖示-從縱向配置到橫向組合
Options API（Vue2）：
+ data
+ methods
+ computed
+ watch
+ lifecycle
=> 縱向拆分邏輯塊
Composition API（Vue3）：
+ setup()
└─ ref()
└─ computed()
└─ watch()
└─ 生命周期
=> 橫向組合功能塊
6、優(yōu)劣對比分析表
| 對比維度 | Options API（Vue2） | Composition API（Vue3） |
|---|---|---|
| 邏輯聚合 | ? 分散在多個選項中 | ? 相關邏輯集中，易讀維護 |
| 類型推導 | ? 較弱（尤其在 methods 中） | ? TS 友好，類型推導精準 |
| 邏輯復用 | ? 依賴 mixins、繼承 | ? composables（函數(shù)級復用） |
| 學習曲線 | ? 容易上手 | ? 初學者需理解響應式與 setup 機制 |
| 工具支持 | ? Vue2 DevTools 成熟 | ? Vue3 DevTools 更直觀追蹤邏輯 |
| 團隊協(xié)作 | ? 各選項獨立，職責清晰 | ? 明確邏輯邊界，可抽離共享邏輯模塊 |
7、現(xiàn)代實踐-組合Composition API+TypeScript+Pinia
import { defineComponent, ref, computed } from 'vue'
import { useUserStore } from '@/stores/user'
export default defineComponent({
setup() {
const userStore = useUserStore()
const input = ref('')
const isValid = computed(() => input.value.length > 3)
const submit = async () => {
if (!isValid.value) return
await userStore.login(input.value)
}
return { input, isValid, submit }
}
})實現(xiàn)優(yōu)勢：
- 狀態(tài)（Pinia）解耦；
- TS 語義清晰；
- 響應式邏輯與 UI 行為緊密綁定，提升可測試性與團隊協(xié)作效率。
8、Composition API的挑戰(zhàn)與遷移建議
挑戰(zhàn)
- 對響應式原理需更深理解（如
refvsreactive）。 - 需要熟悉生命周期組合函數(shù)（如
onMounted,onBeforeUnmount等）。 - 初學者可能因
setup抽象過多而感到困惑。
遷移策略
- 從“小組件”先試水；
- 團隊統(tǒng)一
useXXXcomposable 規(guī)范； - 使用
9、實戰(zhàn)提問&面試關注點
面試核心對比點 & 快速答要
| 題目 | 簡明回答要點 |
|---|---|
setup() 的執(zhí)行時機？ | 在 beforeCreate 之前調用，不能訪問 this |
ref 與 reactive 有何區(qū)別？ | ref 用于基本類型，reactive 用于對象；前者.value 才訪問數(shù)據(jù) |
| Options API 為什么難以復用邏輯？ | 因為邏輯被拆分在多個塊，無法提取為獨立函數(shù) |
| 如何遷移大型 Options API 組件？ | 拆分成邏輯單元，逐步遷移到 composables，測試保障邏輯一致性 |
| Composition API 與 TS 配合優(yōu)勢？ | TS 自動推導返回類型，IDE 補全強，邏輯函數(shù)可復用 |
| 使用 Composition API 時如何組織代碼？ | 遵循“功能分組 + 局部組合 + 最小暴露”設計原則 |
結語-從配置者到設計者-框架演化是開發(fā)者思維的進化
Vue3 的 Composition API 不僅是新的寫法，更是組件組織理念的升級。它鼓勵我們以“功能為單位”進行思考與設計，打造可復用、可組合、可維護的現(xiàn)代組件。
從 Options 到 Composition，不只是范式的切換，更是開發(fā)者走向專業(yè)化的里程碑。
以上就是Vue組件設計升級之Composition API和Options API的區(qū)別的詳細內容，更多關于Vue中Composition API和Options API的區(qū)別的資料請關注腳本之家其它相關文章！
相關文章
VUE跨域問題Access to XMLHttpRequest at
今天發(fā)現(xiàn)一個錯誤，VUE發(fā)送請求的時候不能請求到正確數(shù)據(jù)，VUE跨域問題Access to XMLHttpRequest at，本文就詳細的來介紹一下解決方法，感興趣的可以了解一下2022-05-05
本文介紹了VUE中組件的基本使用以及個人對VUE組件的理解,希望能幫助到大家2019-02-02
這篇文章主要介紹了深入了解Vue3模板編譯原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
vue3 高德地圖關鍵詞搜索獲取經(jīng)緯度的示例代碼
這篇文章主要介紹了vue3 高德地圖關鍵詞搜索獲取經(jīng)緯度的示例代碼,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue中字符串如何拼接路由path路徑方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了詳解vue-cli項目中的proxyTable跨域問題小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue 檢測用戶上傳圖片寬高的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue中Class和Style實現(xiàn)v-bind綁定的幾種用法
項目開發(fā)中給元素添加/刪除 class 是非常常見的行為之一， 例如網(wǎng)站導航都會給選中項添加一個 active 類用來區(qū)別選與未選中的樣式，那么在 vue 中 我們如何處理這類的效果呢？下面我們就一起來了解一下2021-05-05
這篇文章主要介紹了Vue SPA首屏加載緩慢問題解決方案，首屏時間（First Contentful Paint），指的是瀏覽器從響應用戶輸入網(wǎng)址地址，到首屏內容渲染完成的時間，此時整個網(wǎng)頁不一定要全部渲染完成，但需要展示當前視窗需要的內容2023-03-03