Vue.js 3 Composition API: Global Geliştiriciler için Derinlemesine Bir İnceleme

Vue.js, anlaşılır öğrenme eğrisi ve güçlü özellikleri sayesinde modern web uygulamaları oluşturmak için hızla popüler bir seçenek haline geldi. Vue.js 3, bileşen mantığınızı organize etmenin yeni bir yolu olan Composition API'nin tanıtımıyla bunu daha da ileri taşıyor. Bu derinlemesine inceleme, Composition API'yi etkili bir şekilde anlamak ve kullanmak için kapsamlı bir rehber sunarak, sizi daha sürdürülebilir, yeniden kullanılabilir ve test edilebilir Vue uygulamaları oluşturma becerileriyle donatır.

Composition API Nedir?

Composition API, Vue bileşenlerini seçenekleri bildirmek yerine içe aktarılan fonksiyonları kullanarak yazmamızı sağlayan bir API setidir. Esasen, şablonda nerede göründüğüne bakılmaksızın ilgili mantığı bir araya toplamanıza olanak tanır. Bu, kodu bu önceden tanımlanmış kategorilere göre düzenlemeye zorlayan Options API (data, methods, computed, watch) ile çelişir. Options API'yi kodunuzu *ne olduğuna* (veri, metot vb.) göre organize etmek olarak düşünün, oysa Composition API kodu *ne yaptığına* göre organize etmenize olanak tanır.

Composition API'nin çekirdeği setup() fonksiyonu etrafında döner. Bu fonksiyon, bir bileşen içinde Composition API'yi kullanmanın giriş noktasıdır. setup() içinde, composable fonksiyonlar kullanarak reaktif durum, hesaplanmış özellikler, metotlar ve yaşam döngüsü kancaları tanımlayabilirsiniz.

Neden Composition API Kullanmalı?

Composition API, geleneksel Options API'ye göre, özellikle daha büyük ve karmaşık uygulamalar için birçok avantaj sunar:

• Geliştirilmiş Kod Organizasyonu: Composition API, ilgili mantığı composable fonksiyonlarda gruplandırmanıza olanak tanıyarak kodunuzu daha organize ve anlaşılır hale getirir. İlgili kodu farklı Options API özelliklerine dağıtmak yerine, hepsini tek bir yerde tutabilirsiniz. Bu, özellikle birden fazla özellik içeren karmaşık bileşenlerle uğraşırken faydalıdır.
• Artırılmış Yeniden Kullanılabilirlik: Composable fonksiyonlar kolayca çıkarılabilir ve birden fazla bileşende yeniden kullanılabilir. Bu, kodun yeniden kullanımını teşvik eder ve tekrarı azaltarak daha verimli geliştirmeye yol açar. Bu, uygulamanız genelinde tutarlı bir kullanıcı deneyimi sağlamak için ezber bozan bir özelliktir.
• Daha İyi Test Edilebilirlik: Composition API, bireysel composable fonksiyonları yalıtılmış olarak test etmenize olanak tanıyarak birim testini kolaylaştırır. Bu, hataları belirlemeyi ve düzeltmeyi kolaylaştırarak daha sağlam ve güvenilir uygulamalarla sonuçlanır.
• Tip Güvenliği: TypeScript ile kullanıldığında, Composition API mükemmel tip güvenliği sağlar ve geliştirme sırasında olası hataları yakalar. Bu, kod tabanınızın genel kalitesini ve sürdürülebilirliğini önemli ölçüde artırabilir.
• Mantıksal Çıkarma ve Yeniden Kullanım: Composition API, bileşeninizin mantıksal kısımlarını çıkarmayı ve yeniden kullanmayı kolaylaştırır. Bu, genellikle birden fazla bileşen arasında paylaşılması gereken veri çekme, form doğrulama veya kullanıcı kimlik doğrulamasını yönetme gibi özelliklerle uğraşırken özellikle kullanışlıdır.

Temel Kavramları Anlamak

Şimdi Composition API'nin temelini oluşturan anahtar kavramlara dalalım:

1. setup()

Daha önce de belirtildiği gibi, setup() Composition API'yi kullanmanın giriş noktasıdır. Bu, bileşen oluşturulmadan önce yürütülen bir bileşen seçeneğidir. setup() içinde reaktif durum, hesaplanmış özellikler, metotlar ve yaşam döngüsü kancaları tanımlar ve ardından şablona sunmak istediğiniz değerleri içeren bir nesne döndürürsünüz.

Örnek:

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

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

    return {
      count,
      increment
    }
  }
}

Bu örnekte, count adında reaktif bir değişken oluşturmak için ref kullanıyoruz. Ayrıca count değerini artıran increment adında bir metot tanımlıyoruz. Son olarak, count ve increment içeren bir nesne döndürüyoruz, bu da onları bileşenin şablonunda kullanılabilir hale getiriyor.

2. ref ve reactive ile Reaktif Durum

Composition API, reaktif durum oluşturmak için iki temel fonksiyon sunar: ref ve reactive.

• ref: ref ilkel bir değer (sayı, dize, boolean vb.) alır ve reaktif ve değiştirilebilir bir ref nesnesi döndürür. Değere, ref'in .value özelliği aracılığıyla erişilir ve değiştirilir. Tek bir değerdeki değişiklikleri izlemek istediğinizde ref kullanın.
• reactive: reactive bir nesne alır ve o nesnenin reaktif bir proxy'sini döndürür. Reaktif nesnenin özelliklerindeki değişiklikler bileşende güncellemeleri tetikler. Bir nesne içindeki birden çok özelliğin değişikliklerini izlemek istediğinizde reactive kullanın.

ref kullanarak örnek:

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Merhaba, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

reactive kullanarak örnek:

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. computed ile Hesaplanmış Özellikler

Hesaplanmış özellikler, diğer reaktif durumlardan türetilen değerlerdir. Bağımlılıkları her değiştiğinde otomatik olarak güncellenirler. computed fonksiyonu bir getter fonksiyonunu argüman olarak alır ve salt okunur reaktif bir ref döndürür.

Örnek:

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

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

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

Bu örnekte, fullName, firstName ve lastName'e bağlı bir hesaplanmış özelliktir. firstName veya lastName her değiştiğinde, fullName otomatik olarak güncellenecektir.

4. watch ve watchEffect ile Gözlemciler

Gözlemciler, reaktif durumdaki değişikliklere tepki vermenizi sağlar. Composition API, gözlemciler oluşturmak için iki ana yol sunar: watch ve watchEffect.

• watch: watch, hangi reaktif bağımlılıkların izleneceğini açıkça belirtmenize olanak tanır. İlk argüman olarak bir veya daha fazla reaktif referans (ref'ler, hesaplanmış özellikler veya reaktif nesneler) ve ikinci argüman olarak bir geri arama fonksiyonu alır. Geri arama fonksiyonu, belirtilen bağımlılıklardan herhangi biri değiştiğinde yürütülür.
• watchEffect: watchEffect, geri arama fonksiyonu içinde kullanılan tüm reaktif bağımlılıkları otomatik olarak izler. Geri arama fonksiyonu başlangıçta bir kez ve ardından izlenen bağımlılıklardan herhangi biri değiştiğinde yeniden yürütülür. Bu, bağımlılıkları açıkça belirtmeden reaktif durum değişikliklerine dayalı yan etkiler gerçekleştirmek istediğinizde kullanışlıdır. Ancak, çok fazla bağımlılık izlerse bazen performans sorunlarına yol açabileceğinden watchEffect'e dikkat edin.

watch kullanarak örnek:

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Sayı ${oldValue} değerinden ${newValue} değerine değişti`)
      }
    )

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

    return {
      count,
      increment
    }
  }
}

watchEffect kullanarak örnek:

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Merhaba')

    watchEffect(() => {
      console.log(`Mesaj: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. Yaşam Döngüsü Kancaları

Composition API, onMounted, onUpdated ve onUnmounted gibi on ile başlayan fonksiyonlar aracılığıyla bileşen yaşam döngüsü kancalarına erişim sağlar. Bu fonksiyonlar, ilgili yaşam döngüsü kancası tetiklendiğinde yürütülecek bir geri arama fonksiyonunu argüman olarak alır.

Örnek:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Bileşen bağlandı (mounted)')
    })

    onUnmounted(() => {
      console.log('Bileşen kaldırıldı (unmounted)')
    })

    return {}
  }
}

Composable Fonksiyonlar Oluşturma

Composition API'nin gerçek gücü, yeniden kullanılabilir composable fonksiyonlar oluşturma yeteneğinden gelir. Bir composable fonksiyon, bir parça bileşen mantığını kapsayan ve birden çok bileşende kullanılabilen reaktif durum ve fonksiyonlar döndüren basit bir fonksiyondur.

Örnek: Fare konumunu izleyen bir composable fonksiyon oluşturalım:

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

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

Şimdi, bu composable fonksiyonu herhangi bir bileşende kullanabilirsiniz:

import { useMousePosition } from './useMousePosition'

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

    return {
      x,
      y
    }
  }
}

Pratik Örnekler ve Kullanım Senaryoları

Composition API'nin gerçek dünya senaryolarında nasıl kullanılabileceğine dair bazı pratik örnekleri inceleyelim:

1. Veri Çekme

Bir API'den veri çekmek için bir composable fonksiyon oluşturmak yaygın bir kullanım durumudur. Bu, aynı veri çekme mantığını birden çok bileşende yeniden kullanmanıza olanak tanır.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

Daha sonra bu composable fonksiyonu bileşenlerinizde şu şekilde kullanabilirsiniz:

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. Form Doğrulama

Form doğrulama, Composition API'nin çok yardımcı olabileceği başka bir alandır. Doğrulama mantığını kapsayan composable fonksiyonlar oluşturabilir ve bunları farklı formlarda yeniden kullanabilirsiniz.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'Bu alan zorunludur'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Geçersiz e-posta formatı'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

Bir bileşende kullanımı:

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. Kullanıcı Kimlik Doğrulamasını Yönetme

Kimlik doğrulama mantığı genellikle karmaşık olabilir ve birden çok bileşende tekrarlanabilir. Composition API, tüm kimlik doğrulama mantığını kapsayan ve bileşenlerinizin kullanması için temiz bir API sağlayan bir composable fonksiyon oluşturmanıza olanak tanır.

Örnek: (Basitleştirilmiş)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // API çağrısını simüle et
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // API çağrısını simüle et
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Composition API Kullanımı için En İyi Uygulamalar

Composition API'den en iyi şekilde yararlanmak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

• Composable fonksiyonları odaklı tutun: Her composable fonksiyonun tek ve iyi tanımlanmış bir amacı olmalıdır. Bu, onları anlamayı, yeniden kullanmayı ve test etmeyi kolaylaştırır.
• Açıklayıcı isimler kullanın: Composable fonksiyonun amacını açıkça belirten isimler seçin. Bu, kodunuzu daha okunabilir ve sürdürülebilir hale getirecektir.
• Sadece ihtiyacınız olanı döndürün: Yalnızca bileşen tarafından gerçekten ihtiyaç duyulan reaktif durumu ve fonksiyonları döndürün. Bu, bileşenlerinizin karmaşıklığını azaltmaya ve performansı artırmaya yardımcı olur.
• TypeScript kullanmayı düşünün: TypeScript mükemmel tip güvenliği sağlar ve geliştirme sürecinin başlarında hataları yakalamanıza yardımcı olabilir. Bu, özellikle Composition API ile çalışırken faydalıdır.
• Composable fonksiyonlarınızı belgeleyin: Composable fonksiyonlarınıza amaçlarını, nasıl çalıştıklarını ve sahip oldukları bağımlılıkları açıklayan yorumlar ekleyin. Bu, diğer geliştiricilerin (ve gelecekteki sizin) kodunuzu anlamasını ve kullanmasını kolaylaştıracaktır.
• Composable fonksiyonlarınızı test edin: Composable fonksiyonlarınızın doğru çalıştığından emin olmak için birim testleri yazın. Bu, hataları erken yakalamanıza ve kod tabanınızın genel kalitesini artırmanıza yardımcı olacaktır.
• Tutarlı bir stil kullanın: Composable fonksiyonlarınız için tutarlı bir stil oluşturun ve buna sadık kalın. Bu, kodunuzu daha okunabilir ve sürdürülebilir hale getirecektir.

Yaygın Hatalar ve Bunlardan Kaçınma Yolları

Composition API birçok fayda sunarken, farkında olunması gereken bazı yaygın tuzaklar da vardır:

• Composable fonksiyonları aşırı karmaşıklaştırmak: Kendinizi kaptırıp çok karmaşık composable fonksiyonlar oluşturmak kolaydır. Onları odaklı ve basit tutmaya çalışın. Bir composable fonksiyon çok büyürse, onu daha küçük, daha yönetilebilir parçalara ayırmayı düşünün.
• Yanlışlıkla reaktivite sorunları: ref ve reactive'in nasıl çalıştığını anladığınızdan ve bunları doğru kullandığınızdan emin olun. Örneğin, bir ref'in iç içe geçmiş bir özelliğini sarmalamadan doğrudan değiştirmek beklenmedik davranışlara yol açabilir.
• Yaşam döngüsü kancalarını yanlış kullanmak: Yaşam döngüsü kancalarının zamanlamasına dikkat edin ve bunları uygun şekilde kullandığınızdan emin olun. Örneğin, onBeforeMount içinde DOM öğelerine erişmeye çalışmayın, çünkü henüz oluşturulmamışlardır.
• watchEffect ile performans sorunları: watchEffect tarafından izlenen bağımlılıklara dikkat edin. Çok fazla bağımlılık izlerse, performans sorunlarına yol açabilir. Bunun yerine izlemek istediğiniz bağımlılıkları açıkça belirtmek için watch kullanmayı düşünün.
• Olay dinleyicilerini kaldırmayı unutmak: Bir composable fonksiyon içinde olay dinleyicileri kullanırken, bellek sızıntılarını önlemek için bunları onUnmounted kancasında kaldırdığınızdan emin olun.

Composition API ve Global Ekipler

Composition API, aşağıdakileri teşvik ederek global geliştirme ekipleri içindeki iş birliğini besler:

• Standartlaştırılmış Kod Yapısı: Composable fonksiyonlara yapılan vurgu, kodu organize etmek için açık ve tutarlı bir desen sağlayarak farklı geçmişlere sahip ekip üyelerinin kod tabanını anlamasını ve katkıda bulunmasını kolaylaştırır.
• Modüler Tasarım: Karmaşık mantığı yeniden kullanılabilir composable'lara ayırmak, farklı ekip üyelerinin birbirlerinin işine müdahale etmeden uygulamanın bağımsız bölümleri üzerinde çalışabileceği daha modüler bir tasarıma olanak tanır.
• Geliştirilmiş Kod İncelemesi: Composable fonksiyonların odaklanmış doğası, kod incelemesini basitleştirir, çünkü incelemeciler her bir composable'ın amacını ve işlevselliğini kolayca anlayabilir.
• Bilgi Paylaşımı: Composable fonksiyonlar, farklı projeler ve ekipler arasında kolayca paylaşılabilen ve yeniden kullanılabilen kendi kendine yeten bilgi birimleri olarak hareket eder.

Sonuç

Vue.js 3 Composition API, Vue uygulamalarınızın organizasyonunu, yeniden kullanılabilirliğini ve test edilebilirliğini önemli ölçüde artırabilen güçlü bir araçtır. Bu derinlemesine incelemede özetlenen temel kavramları anlayarak ve en iyi uygulamaları takip ederek, Composition API'den yararlanarak global bir kitle için daha sürdürülebilir ve ölçeklenebilir uygulamalar oluşturabilirsiniz. Composition API'yi benimseyin ve Vue.js 3'ün tüm potansiyelini ortaya çıkarın.

Kendi projelerinizde Composition API ile denemeler yapmanızı ve sunduğu geniş olanakları keşfetmenizi öneririz. İyi kodlamalar!