Используешь ли Composite API

Composition API в разработке

Да, я использую Composition API в своей работе, главным образом в контексте Vue.js. Это мощный подход к структурированию логики компонентов, и я вижу, как он эволюционирует в экосистеме JavaScript-фреймворков.

Что такое Composition API

Composition API (введён в Vue 3) - это альтернатива Options API, которая позволяет организовывать логику компонента функциями вместо статических объектных свойств:

// Options API (старый подход)
export default {
  data() { return { count: 0 } },
  computed: { doubled() { return this.count * 2 } },
  methods: { increment() { this.count++ } }
}

// Composition API (современный подход)
import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    const increment = () => count.value++
    
    return { count, doubled, increment }
  }
}

Преимущества Composition API

1. Переиспользование логики Создание композиционных функций (composition functions) для общей логики:

function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)
  
  onMounted(() => {
    loading.value = true
    fetch(url)
      .then(res => res.json())
      .then(result => { data.value = result })
      .catch(err => { error.value = err })
      .finally(() => { loading.value = false })
  })
  
  return { data, loading, error }
}

// Использование в разных компонентах
const { data: users } = useFetch('/api/users')
const { data: posts } = useFetch('/api/posts')

2. Лучшая организация кода Логика группируется по функциональности, а не по типам (data, computed, methods).

3. Лучшая поддержка TypeScript Типы вывод значительно лучше с функциональным подходом.

4. Более гибкая архитектура Легче создавать сложные компоненты и управлять зависимостями.

Связь с React Hooks

Composition API очень похож на React Hooks, которые я также активно использую:

// Vue Composition API
const count = ref(0)
const increment = () => count.value++

// React Hooks (эквивалент)
const [count, setCount] = useState(0)
const increment = () => setCount(c => c + 1)

Оба подхода решают одну проблему: как переиспользовать логику между компонентами без глубокого вложения компонентов (RenderProps, HOC).

Когда использовать

Composition API идеален для:

• Компонентов с сложной логикой
• Когда нужно переиспользовать логику в разных компонентах
• Больших приложений с четкой архитектурой
• Когда вы используете TypeScript

Options API остаётся полезным для:

• Простых компонентов
• Быстрой прототипизации
• Команд, привычных к классическому подходу

Лучшие практики

1. Создавай composition functions для переиспользуемой логики:

function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return { count, increment, decrement, reset }
}

2. Разделяй логику и представление: Оставляй в компоненте только отображение, логику выноси в composables.

3. Правильно работай с жизненным циклом:

function useMountedState() {
  const isMounted = ref(false)
  onMounted(() => { isMounted.value = true })
  onUnmounted(() => { isMounted.value = false })
  return isMounted
}

Мой опыт

На практике я использую Composition API для:

• Управления состоянием в больших приложениях
• Создания переиспользуемых хуков (функций)
• Организации сложной бизнес-логики
• Интеграции с внешними API

Это подход, который я рекомендую изучить всем frontend-разработчикам, работающим с Vue или даже с React, так как понимание этого паттерна углубляет понимание современного JavaScript-разработки.