В чём разница между Options API и Composition API в Vue 3?

Суть

Options API — это исторический способ описать компонент Vue набором свойств объекта: data, methods, computed, watch, mounted. Composition API — добавленный в Vue 3 способ собирать всю реактивную логику внутри функции setup (или сахара <script setup>) с помощью ref, reactive, computed, watch и lifecycle-функций onMounted, onUnmounted и т.д. В Vue 3 одинаково поддерживаются оба стиля, переключаться между ними можно даже в одном проекте.

Как выбирать

Options API подходит, когда команде нужна жёсткая структура и компонент сравнительно небольшой: легко учить, легко читать новичкам. Composition API выигрывает, когда логика становится сквозной: одна фича (например, поиск, пагинация, форма) разрезается на несколько data/methods/watch-блоков в Options API, а в Composition API лежит рядом или выносится в composable.

Критерии выбора:

• много переиспользования логики между компонентами — Composition API + composables;
• сложная типизация props/emit/state — <script setup lang="ts">;
• обучение новичка на простом CRUD без TS — Options API нормально читается;
• интеграция в legacy-кодовую базу Vue 2.x — Options API для совместимости.

Пример

// Options API
export default {
  data: () => ({ count: 0 }),
  computed: { double(): number { return this.count * 2 } },
  methods: { inc() { this.count++ } },
  mounted() { console.log('mounted') }
}

// Composition API через <script setup>
import { ref, computed, onMounted } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
function inc() { count.value++ }
onMounted(() => console.log('mounted'))

Риски и нюансы

В

Composition API легко забыть .value у ref и получить молчаливый баг (сравнение ref с числом всегда false). В Options API наоборот легко получить «спагетти» при росте компонента, когда одна фича размазана по пяти секциям. Смешивать setup и Options-поля в одном компоненте можно, но это снижает читаемость. TypeScript для Options API через defineComponent требует больше явных аннотаций, чем <script setup lang="ts">, где типы выводятся естественно.

• Считать, что Composition API заменил Options API: в Vue 3 они равноправны.
• Полностью переписывать рабочий Options-код «ради моды».
• Забывать .value у ref в шаблоне (там, наоборот, автораспаковка).
• Использовать this внутри setup — там его нет.

• Понимает, что в Vue 3 оба API поддерживаются.
• Может назвать конкретные плюсы Composition API (переиспользование, TS, группировка по фиче).
• Не путает Composition API с обязательным переходом на <script setup>.
• Знает, что lifecycle-хуки в Composition API — это функции вида onMounted.