Что делает компоновщик

Компоновщик (Composition API) в Vue 3 позволяет организовывать логику компонента в виде переиспользуемых функций, а не по опциям (data, methods и т.д.).

Преимущества:

• Лучшая организация кода для сложных компонентов
• Переиспользование логики между компонентами (через composables)
• Более гибкая типизация с TypeScript

Пример:

import { ref, computed } from 'vue';

export function useCounter() {
  const count = ref(0);
  const double = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, double, increment };
}

Использование в компоненте:

import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, double, increment } = useCounter();
    return { count, double, increment };
  }
}

Компоновщик особенно полезен для крупных приложений и командной разработки.