Що таке composable-функції?

VueJunior~1 хв читання

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

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

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

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

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

// 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. Гнучкість

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

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

Приклад: useFetch()

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

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

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)

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

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

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.