Options API и Composition API — это два разных подхода к написанию компонентов во Vue.js. Оба официально поддерживаются во Vue 3, но различаются в синтаксисе, организации кода, повторном использовании логики и масштабируемости.

Основы Options API

Options API использовался по умолчанию до Vue 3. Он структурирует код компонентов через специальные опции (data, methods, computed, watch, props, mounted и т.д.). Каждая часть логики определяется в соответствующем разделе.

Пример Options API:

export default {
data() {
return {
count: 0
};
},
computed: {
double() {
return this.count \* 2;
}
},
methods: {
increment() {
this.count++;
}
},
mounted() {
console.log('Component mounted');
}
}

Здесь логика компонента разделена по типам: переменные — в data, вычисления — в computed, методы — в methods, жизненные циклы — в отдельных хуках.

Основы Composition API

Composition API появился в Vue 3. Он использует функцию setup(), внутри которой можно управлять всеми аспектами логики компонента с помощью реактивных функций (ref, reactive, computed, watch, onMounted и т.д.).

Пример Composition API:

<script setup>
import { ref, computed, onMounted } from 'vue';
const count = ref(0);
const double = computed(() => count.value \* 2);
function increment() {
count.value++;
}
onMounted(() => {
console.log('Component mounted');
});
</script>

Всё определено внутри setup или <script setup>, что позволяет держать связанную логику ближе друг к другу.

Сравнение: структура и организация кода

Повторное использование логики

• Options API поддерживает повторное использование через миксины, но они имеют ряд ограничений: имена могут конфликтовать, сложно отслеживать происхождение логики.

const myMixin = {
data() {
return { message: 'hello' };
},
methods: {
greet() {
console.log(this.message);
}
}
};

• Composition API поддерживает повторное использование через composition functions (настраиваемые функции, возвращающие реактивную логику).

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

Поддержка TypeScript

• Options API имеет ограниченную поддержку TypeScript: типы плохо инференсятся, this требует аннотаций, сложно типизировать пропсы.

• Composition API гораздо лучше поддерживает TypeScript, поскольку всё — обычные JS/TS функции:

const count = ref<number>(0);

Обработка props, emit, slots

• **Options API:
  **

export default {
props: \['title'\],
methods: {
send() {
this.$emit('send');
}
}
}

• **Composition API (script setup):
  **

<script setup>
const props = defineProps<{ title: string }>();
const emit = defineEmits(\['send'\]);
function send() {
emit('send');
}
</script>

Жизненный цикл

• Options API использует имена хуков:

mounted() {
console.log('mounted');
}

• Composition API использует импортируемые функции:

onMounted(() => {
console.log('mounted');
});

Работа с реактивностью

• Options API скрывает реактивность за кулисами: данные в data автоматически оборачиваются во Vue’s reactive system.

• Composition API предоставляет явные реактивные функции:

  • ref() для примитивов

  • reactive() для объектов

  • computed() для вычисляемых свойств

  • watch() и watchEffect() для отслеживания

Порог входа

• Options API легче для новичков: декларативная структура, меньше абстракций.

• Composition API требует понимания реактивности, функций, структуры setup, но в итоге даёт больше контроля.

Совместное использование

Vue 3 позволяет использовать оба подхода в одном компоненте, но это не рекомендуется без необходимости. Лучше придерживаться одного API внутри компонента.

Пример гибридного подхода:

export default {
props: \['msg'\],
setup() {
const count = ref(0);
return { count };
},
mounted() {
console.log('Options lifecycle hook');
}
}

Когда использовать Options API

• Для небольших компонентов.

• При работе в команде с новичками во Vue.

• Когда проект унаследован и использует Options API.

Когда использовать Composition API

• При большом или масштабируемом проекте.

• При использовании TypeScript.

• Когда важна повторная используемость логики.

• Когда необходимо улучшить читаемость и поддерживаемость кода.