Vue.js 3 Composition API: Современная разработка

# Vue.js 3 Composition API: Современная разработка

## Введение

Composition API - новый способ написания компонентов в Vue.js 3, который предоставляет больше гибкости и переиспользуемости кода.

## Основы Composition API

### setup() функция

```javascript
import { ref, computed } from 'vue'

export default {
setup() {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
count.value++
}

return {
count,
doubleCount,
increment
}
}
}
```

### Script Setup (синтаксический сахар)

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

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
count.value++
}
</script>
```

## Реактивность

### ref и reactive

```javascript
import { ref, reactive } from 'vue'

// Для примитивов
const count = ref(0)

// Для объектов
const state = reactive({
name: 'Vue',
version: 3
})
```

## Composables

Composables - переиспользуемые функции:

```javascript
// 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 }
}

// Использование
import { useCounter } from './useCounter'

const { count, increment } = useCounter(10)
```

## Lifecycle Hooks

```javascript
import { onMounted, onUnmounted } from 'vue'

export default {
setup() {
onMounted(() => {
console.log('Компонент смонтирован')
})

onUnmounted(() => {
console.log('Компонент размонтирован')
})
}
}
```

## Миграция с Options API

Composition API полностью совместим с Options API. Вы можете использовать оба подхода в одном проекте.

## Заключение

Composition API делает код более организованным и переиспользуемым. Это современный способ разработки на Vue.js 3.