Vue 3 Composition API: Полное руководство с практическими примерами для разработчиков

Если вы переходите с Vue 2 на Vue 3 или начинаете изучать современную фронтенд-разработку, Composition API станет вашим главным инструментом. Это не просто новый синтаксис — это философия организации кода, которая делает компоненты более читаемыми, переиспользуемыми и масштабируемыми. В этой статье мы разберем Composition API на практических примерах, от базовых до продвинутых, чтобы вы могли уверенно применять его в своих проектах.

Что такое Composition API и зачем он нужен?

Composition API — это альтернативный подход к организации логики компонентов Vue 3. В отличие от Options API (который все еще поддерживается), где код разделен по опциям (data, methods, computed и т.д.), Composition API позволяет группировать логику по функциональности, используя функции ref, reactive, computed и хуки жизненного цикла внутри функции setup().

Базовые примеры Composition API

Реактивные данные с ref и reactive

Простейший пример — создание реактивных переменных:

import { ref, reactive } from 'vue'

export default {
  setup() {
    // Для примитивов и объектов используем ref
    const count = ref(0)
    const message = ref('Привет Vue 3!')
    
    // Для сложных объектов лучше reactive
    const user = reactive({
      name: 'Алексей',
      age: 28,
      email: 'alex@example.com'
    })
    
    function increment() {
      count.value++ // Обратите внимание на .value для ref
      user.age++    // Для reactive обращаемся напрямую
    }
    
    return { count, message, user, increment }
  }
}

Вычисляемые свойства и watchers

Composition API предлагает более гибкий способ работы с вычисляемыми свойствами и отслеживанием изменений:

import { computed, watch } from 'vue'

export default {
  setup() {
    const price = ref(100)
    const quantity = ref(2)
    
    // Вычисляемое свойство
    const total = computed(() => price.value * quantity.value)
    
    // Watcher для отслеживания изменений
    watch(quantity, (newValue, oldValue) => {
      console.log(`Количество изменилось с ${oldValue} на ${newValue}`)
    })
    
    // Немедленный watcher
    watch(price, (newValue) => {
      console.log(`Новая цена: ${newValue}`)
    }, { immediate: true })
    
    return { price, quantity, total }
  }
}

Продвинутые паттерны

Создание композаблов (composables)

Настоящая сила Composition API раскрывается при создании переиспользуемой логики — композаблов:

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  
  return { x, y }
}

// В компоненте
import { useMouse } from './useMouse'

export default {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  }
}

Работа с асинхронными операциями

Composition API отлично работает с асинхронным кодом:

import { ref, onMounted } from 'vue'
import axios from 'axios'

export default {
  async setup() {
    const posts = ref([])
    const loading = ref(true)
    const error = ref(null)
    
    try {
      const response = await axios.get('https://api.example.com/posts')
      posts.value = response.data
    } catch (err) {
      error.value = err.message
    } finally {
      loading.value = false
    }
    
    // Можно использовать onMounted для побочных эффектов
    onMounted(() => {
      console.log('Компонент загружен с данными:', posts.value.length)
    })
    
    return { posts, loading, error }
  }
}

Лучшие практики и советы

• Именуйте композаблы с префиксом "use" — это общепринятое соглашение
• Группируйте связанную логику вместе — основное преимущество Composition API
• Используйте TypeScript — Composition API отлично типизируется
• Не бойтесь миксовать с Options API — особенно в legacy-коде
• Документируйте композаблы — как обычные функции

FAQ: Часто задаваемые вопросы

Нужно ли полностью переписывать проекты на Composition API?

Нет! Vue 3 полностью поддерживает Options API. Composition API — это дополнительный инструмент. Начинайте использовать его в новых компонентах или при рефакторинге сложной логики.

Когда использовать ref, а когда reactive?

Используйте ref для примитивов и когда вам нужна реактивная ссылка на значение. reactive лучше подходит для сложных объектов, но помните, что он не работает с примитивами и теряет реактивность при деструктуризации.

Composition API сложнее для новичков?

Первоначальная кривая обучения может быть выше, особенно для тех, кто привык к Options API. Однако для сложных приложений и командной разработки Composition API в долгосрочной перспективе упрощает поддержку кода.

Можно ли использовать Vuex с Composition API?

Да, но в Vue 3 рекомендуется использовать Pinia — новую библиотеку управления состоянием, созданную специально для Composition API. Она проще, типизированнее и имеет отличную интеграцию с Vue 3.

Поддерживается ли Composition API в Vue 2?

Да, через официальный плагин @vue/composition-api. Однако для полной поддержки всех возможностей рекомендуется переход на Vue 3.