Vue 3'te Seçenekler API'sinden Kompozisyon API'sine nasıl geçiş yapacağınızı öğrenin.

Vue'nun yaratıcıları, Vue 2'nin 31 Aralık 2023 itibarıyla kullanım ömrünün sonuna ulaşacağını duyurduğu için geliştiricilerin Vue 3'e geçmeleri teşvik ediliyor.

Bu geçişle birlikte, Vue uygulamaları oluşturmaya yönelik daha modüler, bildirimsel ve yazım açısından güvenli bir yaklaşım sunan bir özellik olan Composition API geliyor.

Kompozisyon API'si Nedir?

Composition API, Vue bileşenlerinin yazılmasında bir paradigma değişikliğini temsil ediyor Seçenekler nesnesi. Bu geliştirme stili daha bildirimsel bir yaklaşımı benimser ve uygulama ayrıntılarını soyutlayarak Vue uygulamanızı oluşturmaya odaklanmanıza olanak tanır.

Composition API Motivasyonu

Vue yaratıcıları, Options nesnesiyle karmaşık web uygulamaları oluştururken karşılaşılan zorlukların farkına vardı. Projeler büyüdükçe bileşenin mantığını yönetmek, özellikle işbirlikçi ortamlarda daha az ölçeklenebilir hale geldi ve bakımı zorlaştı.

Geleneksel Seçenekler nesnesi yaklaşımı çoğu zaman birçok bileşen özelliğiyle sonuçlandı ve bu da kodun anlaşılmasını ve sürdürülmesini zorlaştırdı.

instagram viewer

Ek olarak, bileşen mantığının farklı bileşenler arasında yeniden kullanılması hantal hale geldi. Çeşitli yaşam döngüsü kancaları ve yöntemleri içindeki dağınık mantık, bir bileşenin genel davranışının anlaşılmasına da karmaşıklık kattı.

Composition API'nin Avantajları

Kompozisyon API'si, Seçenekler API'sine göre çeşitli avantajlar sağlar.

1. Geliştirilmiş Performans

Vue 3, Proxy Tabanlı Reaktivite Sistemi adı verilen yeni bir işleme mekanizması sunar. Bu sistem, bellek tüketimini azaltarak ve tepkimeyi iyileştirerek daha iyi performans sağlar. Yeni reaktivite sistemi, Vue 3'ün daha büyük bileşen ağaçlarını daha verimli bir şekilde işlemesini sağlar.

2. Daha Küçük Paket Boyutu

Optimize edilmiş kod tabanı ve ağaç sallama desteği sayesinde Vue 3, Vue 2'den daha küçük paket boyutuna sahiptir. Paket boyutundaki bu azalma, daha hızlı yükleme sürelerine ve gelişmiş performansa yol açar.

3. Geliştirilmiş Kod Organizasyonu

Composition API'den yararlanarak bileşeninizin kodunu daha küçük, yeniden kullanılabilir işlevler halinde düzenleyebilirsiniz. Bu, özellikle büyük ve karmaşık bileşenlerin daha iyi anlaşılmasını ve bakımının yapılmasını sağlar.

4. Bileşenlerin ve İşlevlerin Yeniden Kullanılabilirliği

Kompozisyon işlevleri farklı bileşenler arasında kolayca yeniden kullanılabilir, bu da kod paylaşımını ve yeniden kullanılabilir işlevlerden oluşan bir kitaplığın oluşturulmasını kolaylaştırır.

5. Daha İyi TypeScript Desteği

Composition API, geliştirme sırasında daha doğru tür çıkarımına ve türle ilgili hataların daha kolay tanımlanmasına olanak tanıyan daha kapsamlı TypeScript desteği sağlar.

Seçenekler Nesnesi ile Kompozisyon API'si Arasındaki Karşılaştırma

Artık Composition API'nin arkasındaki teoriyi anladığınıza göre onu pratikte kullanmaya başlayabilirsiniz. Composition API'nin avantajlarını anlamak için her iki yaklaşımın bazı önemli yönlerini karşılaştıralım.

Vue 3'teki Reaktif Veriler

Reaktif veriler, Vue'da uygulamanızdaki veri değişikliklerinin kullanıcı arayüzündeki güncellemeleri otomatik olarak tetiklemesine olanak tanıyan temel bir kavramdır.

Vue 2 reaktif sistemini temel aldı Object.defineProperty yöntem ve tüm reaktif özellikleri içeren bir veri nesnesine güveniyordu.

Bir Vue bileşeninde veri seçeneğiyle bir veri özelliği tanımladığınızda, Vue, veri nesnesindeki her özelliği, yeni bir ECMA Komut Dosyası (ES6) özelliği olan alıcılar ve ayarlayıcılarla otomatik olarak sardı.

Bu alıcılar ve ayarlayıcılar, özellikler arasındaki bağımlılıkları izledi ve herhangi bir özelliği değiştirdiğinizde kullanıcı arayüzünü güncelledi.

Aşağıda, Vue 2'de Options nesnesiyle reaktif verileri nasıl oluşturduğunuza dair bir örnek verilmiştir: