Composition API во Vue — это новый способ организации и повторного использования логики компонентов, введённый в Vue 3. В отличие от Options API, где логика разделена по опциям (data, methods, computed и т.д.), Composition API позволяет группировать код по функциональности, используя функции setup и реактивные примитивы.

Основные отличия:

Гибкость и повторное использование: Composition API облегчает создание повторно используемых функций и хуков.
Явное управление реактивностью: с помощью ref, reactive, computed и других функций.
Меньше ограничений по структуре: нет жёсткого разделения на опции, можно писать код более декларативно.

Пример с Composition API:

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    function increment() {
      count.value++;
    }
    return { count, double, increment };
  }
}

В Options API аналогично:

export default {
  data() {
    return { count: 0 };
  },
  computed: {
    double() {
      return this.count * 2;
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Чем Composition API во Vue отличается от Options API?