Nuxt App

Повне керівництво по Composition API у Vue 3

Вивчаємо новий спосіб написання компонентів у Vue 3. Розглянемо основні можливості та переваги Composition API.

Вступ у Composition API

Composition API — це сучасний підхід до організації логіки у Vue 3, який дозволяє краще структурувати код і робити його більш повторно використовуваним.

Основні переваги

  • Краща повторна використаність коду — виносіть логіку у композиції

  • Покращена типізація — краща підтримка TypeScript

  • Гнучкіша організація — групуйте пов'язану логіку

Приклад використання

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

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    
    const increment = () => {
      count.value++
    }
    
    onMounted(() => {
      console.log('Компонент змонтовано')
    })
    
    return {
      count,
      doubled,
      increment
    }
  }
}

Висновок

Composition API відкриває нові можливості для організації коду у Vue 3. Він особливо корисний для складних компонентів та повторно використовуваної логіки.

Edit