Что такое Vue Composables

Ответ

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 внутрь добавь, и будет тебе счастье. Само всё подметётся, как у хорошей хозяйки.

Короче, композаблы — это, блядь, как перейти с самопальных скриптов на нормальный фреймворк. Сначала вроде непривычно, а потом оглянуться не успеешь, как уже без них жить не можешь. Пиздец, как удобно!