Vue 3.0 引入的 Composition API 相較于 Vue 2.x 的 Options API 有顯著的不同。下面從幾個方面對比這兩者的差異：
? 1. 代碼組織方式不同
Vue 2.x — Options API
-
使用
data、methods、computed、watch等分散的選項組織邏輯。 -
每個功能點分散在不同的選項中，可能導致大型組件難以維護。
export default {data() {return {count: 0};},computed: {doubleCount() {return this.count * 2;}},methods: {increment() {this.count++;}}
};
Vue 3.x — Composition API
-
使用
setup()函數將相關邏輯聚合在一起，邏輯關注點清晰、復用性更強。
import { ref, computed } from 'vue';export default {setup() {const count = ref(0);const doubleCount = computed(() => count.value * 2);const increment = () => count.value++;return { count, doubleCount, increment };}
};
? 2. 代碼復用方式不同
Vue 2.x — Options API
-
主要通過 mixins 實現代碼復用，但可能會產生命名沖突、不易追蹤來源。
Vue 3.x — Composition API
-
使用 自定義 hooks（composables） 復用邏輯，清晰、解耦、強類型支持好。
// useCounter.js
import { ref } from 'vue';export function useCounter() {const count = ref(0);const increment = () => count.value++;return { count, increment };
}
// 組件中使用
import { useCounter } from './useCounter';export default {setup() {const { count, increment } = useCounter();return { count, increment };}
}
? 3. 類型支持
-
Composition API 更加友好地支持 TypeScript，因為它依賴函數和變量聲明，而不是框架“魔法”。
-
Options API 在類型推導方面較弱。
? 4. this 關鍵字使用
-
Options API 中大量使用
this，容易引發作用域混淆和錯誤。 -
Composition API 中避免使用
this，一切顯式定義，作用域清晰。
? 5. 生命周期鉤子寫法不同
| 生命周期 | Vue 2 Options API | Vue 3 Composition API |
|---|---|---|
mounted | mounted() | onMounted(() => {}) |
created | created() | setup() 階段處理 |
beforeDestroy | beforeDestroy() | onBeforeUnmount() |
import { onMounted } from 'vue';setup() {onMounted(() => {console.log('組件已掛載');});
}
? 6. 性能
-
Composition API 在 邏輯復用、類型推導、Tree-shaking 上更具優勢。
-
Vue 3 在底層用 Proxy 替代 Object.defineProperty，性能本身也有提升。
? 總結對比表：
| 對比維度 | Options API (Vue 2) | Composition API (Vue 3) |
|---|---|---|
| 邏輯組織 | 分模塊 | 聚合式 |
| 狀態定義 | data/methods/computed | ref/reactive/computed |
| 代碼復用 | mixins | composables |
| 類型支持 | 一般 | 非常好 |
| 作用域 | this 上下文綁定 | 無 this，更清晰 |
| 生命周期 | 對應函數 | import 對應鉤子使用 |
| 學習曲線 | 容易上手 | 更靈活但稍復雜 |
如果你是在大型項目、希望更好地復用邏輯或使用 TypeScript，Composition API 更合適；如果是小型項目或團隊熟悉 Options API，也可繼續使用，Vue 3 仍然支持它。
