> Что такое Composition API во Vue и в чем разница с Options API (Vue.js)

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

Основные различия:

1. Организация кода:

   • Options API: логика разбросана по разным опциям (например, данные в data, методы в methods).

   • Composition API: можно сгруппировать данные, вычисляемые свойства и методы, относящиеся к одной сущности (например, работа с пользователем) в одном блоке.

2. Переиспользование логики:

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

   • Composition API: создаются композаблы (composables) - обычные функции, возвращающие реактивные данные и методы. Их легко импортировать и комбинировать без побочных эффектов.

3. Типизация:

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

   • Composition API: лучше поддерживает TypeScript, так как всё работает через обычные переменные и функции.

4. Гибкость:

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

   • Composition API: можно динамически создавать реактивные данные, использовать условные хуки жизненного цикла, легко комбинировать несколько источников логики.

Пример сравнения:

Options API:

JAVASCRIPT
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  },
  watch: {
    count(newVal) { console.log(newVal) }
  }
}

Composition API (с <script setup>):

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const increment = () => count.value++
watch(count, (newVal) => console.log(newVal))
</script>

Когда что использовать?

• Options API для простых компонентов, где логика невелика, или если команда привыкла к Vue 2.

• Composition API - для сложных компонентов, где требуется переиспользование логики, работа с TypeScript или более чистая организация кода.