Ответ
Компоновщик (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 };
}
}Компоновщик особенно полезен для крупных приложений и командной разработки.
Ответ 18+ 🔞
Да ты послушай, что за дичь придумали эти фронтендеры! Сидят, блядь, небось, кофе попивают и думают: "А давайте-ка усложним людям жизнь, чтобы они совсем нихуя не поняли!"
Вот смотри, раньше-то в Vue было всё по полочкам: data, methods, computed — красота, блядь! А теперь вылез этот ваш Компоновщик, Composition API, называется. Суть в чём, а? В том, чтобы всю логику твоего компонента не по опциям раскидывать, а в отдельные, блядь, переиспользуемые функции засунуть!
И в чём, спрашивается, профит, ёпта?
- Для сложных компонентов — просто песня, блядь! Всё по папочкам, а не в одной куче, как у свиней в хлеву.
- Логику между компонентами таскать можно! Написал одну такую функцию-компоузабл — и юзай её где хошь, хоть на каждом втором экране. Вообще овердохуища экономия времени.
- С 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 };
}
}Короче, если проект у тебя больше, чем "Hello World", и народу в команде больше одного человека — эта штука может реально выручить. А так — да похуй, в принципе, Options API тоже ещё живой, не списали в утиль. Выбирай, что душе угодно, лишь бы работало и в рот меня чих-пых!