Ответ
Vue Composables — это функции, использующие Composition API для инкапсуляции и повторного использования логики с состоянием. Они похожи на миксины, но более гибкие и типобезопасные.
Пример:
// useCounter.js
import { ref } from 'vue';
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
function increment() {
count.value++;
}
return { count, increment };
}
Использование в компоненте:
import { useCounter } from './useCounter';
export default {
setup() {
const { count, increment } = useCounter(10);
return { count, increment };
}
}
Преимущества:
- Лучшая организация кода
- Переиспользование логики между компонентами
- Четкие зависимости (через параметры и возвращаемые значения)
- Автоматическое удаление побочных эффектов при unmount (если использовать onUnmounted)
Ответ 18+ 🔞
Ах, эти ваши Vue Composables, ну просто песня, а не фича! Слушай, я тебе сейчас так объясню, что ты сам от себя офигеешь.
Вот представь: раньше мы, как лохи, миксины юзали — ну, знаешь, этакая солянка из методов и данных, которая в компонент встраивается и потом, блядь, непонятно, откуда что берётся. А теперь — композаблы! Это, сука, как взять свою логику, завернуть её в аккуратную функцию и таскать с собой, как тот самый презерватив в бумажнике: всегда под рукой и проблем не создаёт.
Смотри, как просто, ёпта:
// useCounter.js
import { ref } from 'vue';
export function useCounter(initialValue = 0) {
const count = ref(initialValue);
function increment() {
count.value++;
}
return { count, increment };
}
Вот тебе, блядь, готовая мини-машина для счёта! Не надо никого наследовать, подмешивать — взял, вызвал и пользуйся.
А в компоненте вообще красота:
import { useCounter } from './useCounter';
export default {
setup() {
const { count, increment } = useCounter(10);
return { count, increment };
}
}
И всё, пиши пропало! Теперь у тебя есть count и increment, и ты точно знаешь, откуда они, как будто только что из печки вынул.
И преимущества-то какие, ядрёна вошь!
- Организация кода — теперь не будет этой каши, где всё перемешано, как салат оливье после новогодней ночи. Всё по полочкам, в своих композаблах.
- Переиспользование — написал один раз, вставил куда угодно. Хоть в десяти компонентах юзай — не сломается.
- Зависимости прозрачные — что входит, что выходит, видно как на ладони. Никаких сюрпризов из родительского scope, ебать твою в сраку.
- Побочные эффекты — если надо что почистить при размонтировании, просто
onUnmountedвнутрь добавь, и будет тебе счастье. Само всё подметётся, как у хорошей хозяйки.
Короче, композаблы — это, блядь, как перейти с самопальных скриптов на нормальный фреймворк. Сначала вроде непривычно, а потом оглянуться не успеешь, как уже без них жить не можешь. Пиздец, как удобно!