Vue 3 ile Composition API Kullanımı

Vue 3, modern web geliştirme için güçlü araçlar sunar ve bu araçlar arasında Composition API önemli bir yer tutar. Composition API, bileşen mantığını daha esnek ve yeniden kullanılabilir hale getirir. Bu makalede, Vue 3 Composition API kullanarak bileşenlerin nasıl oluşturulacağını ve yönetileceğini detaylı bir şekilde ele alacağız.

Giriş

Vue 3, geliştiricilere daha esnek ve güçlü bir bileşen geliştirme deneyimi sunar. Composition API, Vue 3 ile tanıtılan yeni bir API’dir ve bileşen mantığını daha modüler hale getirir. Bu makalede, Composition API’nin ne olduğunu ve nasıl kullanılacağını öğreneceksiniz.

Composition API’ye Giriş

Vue 3 ve Composition API Nedir?

Vue 3, kullanıcı arayüzleri oluşturmak için popüler bir JavaScript framework’üdür. Composition API, Vue 3’ün sunduğu, bileşen mantığını fonksiyonlar aracılığıyla tanımlamamıza olanak tanıyan bir API’dir. Bu yaklaşım, bileşenler arasında kodun yeniden kullanılabilirliğini artırır ve daha temiz bir kod yapısı sağlar.

Composition API’nin Temelleri

Composition API, Vue 3’te bileşen mantığını <script setup> bloğu içinde tanımlamamıza olanak tanır. Bu fonksiyon, bileşen oluşturulmadan önce çağrılır ve reaktif durum, metodlar ve yaşam döngüsü hook’ları gibi bileşen özelliklerini tanımlamak için kullanılır.

Composition API’nin Avantajları

• Yeniden Kullanılabilirlik: Mantık parçalarını kolayca tekrar kullanılabilir fonksiyonlara ayırabilirsiniz.
• Tip Güvenliği: TypeScript ile daha iyi entegrasyon sağlar.
• Daha Temiz Kod: Mantık daha iyi organize edilir, özellikle karmaşık bileşenlerde.

Vue 3 Kurulumu ve Başlangıç

Proje Kurulumu

Vue 3 projesi başlatmak için, aşağıdaki komutları kullanabilirsiniz:

npm init vue@latest
cd my-vue-app
npm install
npm run dev

Vue 3 Yapılandırması

Vue 3’ü yapılandırmak için vue.config.js dosyasını kullanabilirsiniz. Bu dosya, projeye özgü ayarları içerir.

Composition API ile Bileşen Oluşturma

Ref ve Reactive Kullanımı

Composition API’de reaktif durum oluşturmak için ref ve reactive fonksiyonları kullanılır. ref fonksiyonu, basit reaktif değerler oluştururken, reactive fonksiyonu, nesneleri reaktif hale getirir.

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

const count = ref(0)
const state = reactive({
  message: 'Hello Vue 3'
})

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

<template>
  <div>
    <p>{{ state.message }}</p>
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

Computed ve Watcher Kullanımı

computed ve watch fonksiyonları, reaktif durumu izlemek ve türetilmiş değerler oluşturmak için kullanılır.

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

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

watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`)
})
</script>

<template>
  <div>
    <p>Doubled count: {{ doubled }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

Lifecycle Hooks ile Çalışma

Composition API, bileşen yaşam döngüsü hook’larını <script setup> bloğu içinde kullanmamıza olanak tanır.

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

const message = ref('Hello')

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

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

<template>
  <div>{{ message }}</div>
</template>

Composition API ile İleri Düzey Kullanım

Custom Composables

Custom composables, mantık parçalarını yeniden kullanılabilir fonksiyonlar olarak ayırmanıza olanak tanır.

<!-- useCounter.js -->
<script setup>
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => {
    count.value++
  }

  return {
    count,
    increment
  }
}
</script>

<!-- Component.vue -->
<script setup>
import { useCounter } from './useCounter'

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

<template>
  <div>
    <p>Count is: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Dependency Injection (provide/inject)

provide ve inject fonksiyonları, bileşenler arasında veri paylaşımını kolaylaştırır.

<!-- ParentComponent.vue -->
<script setup>
import { provide } from 'vue'

provide('message', 'Hello from parent')
</script>

<template>
  <ChildComponent />
</template>

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

<template>
  <div>{{ message }}</div>
</template>

TypeScript Entegrasyonu

Composition API, TypeScript ile daha iyi entegrasyon sağlar ve tip güvenli kod yazmayı kolaylaştırır.

<script setup lang="ts">
import { ref, Ref } from 'vue'

const count: Ref<number> = ref(0)

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

<template>
  <div>
    <p>Count is: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

Proje Örnekleri ve En İyi Uygulamalar

Basit To-Do List Uygulaması

Vue 3 Composition API kullanarak basit bir to-do list uygulaması oluşturabilirsiniz. Reaktif durum yönetimi ve lifecycle hook’ları ile kullanıcı etkileşimlerini yönetebilirsiniz.

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

const todos = ref<string[]>([])
const newTodo = ref('')

const addTodo = () => {
  if (newTodo.value) {
    todos.value.push(newTodo.value)
    newTodo.value = ''
  }
}
</script>

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" />
    <button @click="addTodo">Add</button>
    <ul>
      <li v-for="todo in todos" :key="todo">{{ todo }}</li>
    </ul>
  </div>
</template>

Form Yönetimi ve Validasyon

Composition API, form yönetimi ve validasyon işlemlerini daha düzenli ve okunabilir hale getirir. Custom composables kullanarak validasyon kurallarını ve form durumunu yönetebilirsiniz.

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

const username = ref('')
const password = ref('')

const validateForm = () => {
  if (username.value === '' || password.value === '') {
    alert('All fields are required')
    return false
  }
  return true
}
</script>

<template>
  <div>
    <form @submit.prevent="validateForm">
      <div>
        <label for="username">Username:</label>
        <input id="username" v-model="username" type="text" />
      </div>
      <div>
        <label for="password">Password:</label>
        <input id="password" v-model="password" type="password" />
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

Sonuç ve Öneriler

Vue 3 Composition API, bileşen mantığını daha esnek ve modüler hale getirir. Bu makalede, Composition API’nin temellerinden ileri düzey kullanımına kadar kapsamlı bir rehber sunduk. İlerleyen adımlarda, Vue 3 projelerinizde Composition API’yi kullanarak deneyim kazanmaya devam edin.

Sıkça Sorulan Sorular (FAQ)

Vue 3 Composition API nedir?

Vue 3 Composition API, bileşen mantığını fonksiyonlar aracılığıyla tanımlamanıza olanak tanıyan bir API’dir. Bu, kodun daha modüler ve yeniden kullanılabilir olmasını sağlar.

Composition API’nin avantajları nelerdir?

Yeniden kullanılabilirlik, tip güvenliği ve daha temiz kod yapısı başlıca avantajlarıdır.

Vue 3 Composition API ile nasıl başlanır?

Vue 3 projesi oluşturduktan sonra, bileşenlerinizi <script setup> bloğu içinde tanımlayarak Composition API’yi kullanabilirsiniz.

Ref ve Reactive arasındaki fark nedir?

ref fonksiyonu basit reaktif değerler oluştururken, reactive fonksiyonu nesneleri reaktif hale getirir.

Custom composables nedir ve nasıl kullanılır?

Custom composables, mantık parçalarını yeniden kullanılabilir fonksiyonlar olarak ayırmanıza olanak tanır. Örneğin, sayaç mantığını bir fonksiyon olarak tanımlayabilir ve birden fazla bileşende kullanabilirsiniz.

Vue 3 ile form validasyonu nasıl yapılır?

Vue 3 Composition API ile form validasyonu yapmak için, form verilerini ve validasyon kurallarını ref ve computed fonksiyonları ile tanımlayabilirsiniz. Bu, form yönetimini ve validasyon işlemlerini daha düzenli ve okunabilir hale getirir.

Kaynakça

1. Vue 3 Composition API Documentation
2. LogRocket Blog on Vue 3 Composition API