Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке composable-функції?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Composable-функції** (або **composition functions**) - це **повторно використовувані функції**, які використовують Composition API (`ref`, `reactive`, `computed`, `watch`, `onMounted` тощо) і дозволяють винести логіку, що повторюється, за межі компонентів.

Простіше кажучи:

> **Composable - це ваш власний "хук" у Vue, аналог React Hooks.**
> **Він містить логіку, яку можна легко повторно використовувати в різних компонентах.**

---

## Приклад простої composable-функції

Створимо функцію, яка реалізує лічильник:

```js
// useCounter.js
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const inc = () => count.value++
  const dec = () => count.value--

return { count, inc, dec }
}
```

Тепер можна використовувати в будь-якому компоненті:

```vue
<script setup>
import { useCounter } from './useCounter'

const { count, inc, dec } = useCounter()
</script>

<template>
  <button @click="dec">-</button>
  {{ count }}
  <button @click="inc">+</button>
</template>
```

---

## Навіщо потрібні composable-функції?

#### 1. **Повторне використання логіки**

Ви можете винести повторюваний код з компонентів.

#### 2. **Краще, ніж mixins**

Mixins створювали:

- конфлікти імен
- неявну логіку
- важко читабельний код

Composables - явні і передбачувані.

#### 3. **Чиста архітектура**

Кожна composable-функція - окремий модуль.

#### 4. **Зручно тестувати**

Composable можна тестувати як звичайну JS-функцію.

#### 5. **Гнучкість**

Можна використовувати хуки життєвого циклу:

```js
onMounted(() => console.log('mounted inside composable'))
```

---

## Приклад: useFetch()

Дуже популярний composable:

```js
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const loading = ref(true)
  const error = ref(null)

fetch(url)
    .then(res => res.json())
    .then(json => data.value = json)
    .catch(err => error.value = err)
    .finally(() => loading.value = false)

return { data, loading, error }
}
```

Використання:

```vue
<script setup>
import { useFetch } from './useFetch'
const { data, loading } = useFetch('/api/users')
</script>

<template>
  <div v-if="loading">Loading...</div>
  <pre v-else>{{ data }}</pre>
</template>
```

---

## Composables можуть використовувати lifecycle hooks

```js
export function useMouse() {
  const x = ref(0)
  const y = ref(0)

function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }

onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

return { x, y }
}
```

---

## Правила composable-функцій (як у hooks у React)

1. Викликаються **тільки** зверху в `setup()` або інших composables.
2. **Не викликаються** в циклах, умовах, асинхронних блоках.
3. Ім'я прийнято починати з `use` (`useAuth`, `useForm`, `useFetch`).
4. Повертають тільки публічну частину API (приховуючи внутрішні деталі).

---

## Підсумок (ідеально для співбесіди)

> **Composable-функції - це повторно використовувані функції на базі Composition API, які інкапсулюють логіку (реактивність, computed, watch, lifecycle-хуки) і дозволяють легко ділитися нею між компонентами.**
> **Вони замінюють mixins, роблять код модульним, читабельним, тестованим і гнучким.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати423 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.