Що таке Composition API у Vue 3?

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

Основні поняття

Функція setup()

Composition API базується на функції setup(), яка виконується перед створенням компонента:

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return {
      count,
      increment
    }
  }
}
</script>

Script Setup (рекомендований спосіб)

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const increment = () => {
  count.value++
}
</script>

Основні функції

ref() і reactive()

<script setup>
import { ref, reactive } from 'vue'

// ref для примітивних значень
const count = ref(0)
const message = ref('Hello')

// reactive для об'єктів
const state = reactive({
  user: {
    name: 'John',
    age: 25
  },
  items: []
})

// Доступ до значень
console.log(count.value) // 0
console.log(state.user.name) // John
</script>

computed()

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

// Computed з getter та setter
const fullNameWritable = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (value) => {
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1] || ''
  }
})
</script>

watch() і watchEffect()

<script setup>
import { ref, watch, watchEffect } from 'vue'

const count = ref(0)
const message = ref('Hello')

// Спостереження за конкретним значенням
watch(count, (newValue, oldValue) => {
  console.log(`Count змінився з ${oldValue} на ${newValue}`)
})

// Спостереження за кількома значеннями
watch([count, message], ([newCount, newMessage], [oldCount, oldMessage]) => {
  console.log('Щось змінилося')
})

// watchEffect - автоматично відстежує залежності
watchEffect(() => {
  console.log(`Count: ${count.value}, Message: ${message.value}`)
})
</script>

Життєвий цикл

<script setup>
import { 
  onMounted, 
  onUpdated, 
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount
} from 'vue'

onBeforeMount(() => {
  console.log('Before mount')
})

onMounted(() => {
  console.log('Mounted')
})

onBeforeUpdate(() => {
  console.log('Before update')
})

onUpdated(() => {
  console.log('Updated')
})

onBeforeUnmount(() => {
  console.log('Before unmount')
})

onUnmounted(() => {
  console.log('Unmounted')
})
</script>

Композабли (Composables)

Створення повторно використовуваної логіки:

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

export 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
  }
}

Використання композабла:

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement, reset } = useCounter(10)
</script>

Переваги Composition API

Краща організація логіки - пов'язана логіка зберігається разом
Покращене повторне використання - композабли легко переносити між компонентами
Кращий TypeScript підтримка - більш передбачувані типи
Гнучкість - більше контролю над тим, що експортується

Порівняння з Options API

<!-- Options API -->
<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>

<!-- Composition API -->
<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)
const increment = () => count.value++

onMounted(() => {
  console.log('Component mounted')
})
</script>

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