Bir javascript kitaplığından bir çerçeveye, Vue'nin yolculuğu etkileyici, özellikle de hafif yapısını nasıl koruduğunu düşündüğünüzde. Daha kolay durum yönetimi sağlayan Pinia da dahil olmak üzere Vue3'ün sunduğu çeşitli özellikler ve Vite üzerinde çalışan bir yapı araç zinciri vardır. Uygulamalarınızı Vue3'e güncellemek veya sadece çerçeveyi denemek istiyorsanız, Vue3 hakkında bilmeniz gereken her şeyi burada derledik!
Vue3 nedir?
Vue3'te göreceğiniz değişikliklere girmeden önce, Vue.js'nin ve temel bileşenlerinin ne olduğuna bir göz atalım:
Vue
Vue.js, kullanıcı arayüzleri oluşturmak için kullanılabilecek açık kaynaklı bir ön uç JavaScript çerçevesidir . Çerçeve, kullanıcı ekranlarının hızla geliştirilmesine yardımcı olan bildirime dayalı ve bileşen tabanlı bir kodlama yaklaşımı sunar. Temel veya karmaşık arayüzler geliştirmek için kullanılabilir ve endüstri standardı HTML, CSS ve JavaScript üzerine inşa edilmiştir. Vue.js'nin popülaritesinin ve Vue.js'nin geniş kullanıcı tabanının nedenleri, programcı dostu sözdizimi, kullanım kolaylığı ve iyi tanımlanmış belgeleridir.
Yukarıda bahsedildiği gibi, Vue.js iki temel özellik üzerine kurulmuştur:
Bildirime dayalı oluşturma , kullanıcının JavaScript durumuna bağlı olarak bildirimsel olarak HTML çıktısını tanımlamasını sağlar. Vue.js, şablon sözdizimi yardımıyla normal HTML'de genişler.
Reaktivite - Vue.js, JavaScript durumunu aktif olarak izler ve değiştirildiğinde DOM'yi hızla yeniler.
Vue3.0
Kodlamak için Vue 2 kullanan mühendislerin artık Vue3'e güncelleme yapması gerekiyor. Bunun nedeni, uygulamalarımızı organize etmek için okunabilir, tutarlı bileşenler tasarlamayı çok daha kolay ve daha iyi yöntemler haline getiren yeni yeteneklere sahip olmasıdır. Vue3 daha kullanıcı dostu, daha kısa ve bakımı daha basit. Vue3'ün dikkate değer özelliklerinden bazıları Teleport, Fragments ve çoklu v-modelleridir.
En son sürüm ayrıca filtrelerden kurtuldu ve durum güdümlü CSS değişkenlerinin yanı sıra deneysel bir askıya alma özelliğine de sahip. Ayrıca yaşam döngüsü adlandırma değişiklikleri ve tek dosya bileşeni değişiklikleri de vardır.
Vue3 yayınlandı mı?
Vue'nun mevcut en son sürümü - Vue3, ilk olarak 2018'in ortalarında duyuruldu ve resmi olarak Eylül 2020'de yayınlandı. Vue3.0, 7 Şubat 2022'de aşamalı javascript çerçevesinin resmi varsayılan sürümü olarak ilan edildi.
Vue3'teki yenilikler neler?
Vue3'te sabırsızlıkla beklenecek en heyecan verici değişiklikler şunlardır:
Sağlayın/enjekte edin
Vue 2, kullanıcıların dizeler, diziler, nesneler ve daha fazlası gibi verileri koddaki aksesuarlar aracılığıyla geçirmesine izin verdi. Bu tür veriler, bir ana öğeden onun alt öğelerine kolayca aktarılabilir. Bununla birlikte, sahne öğelerini kullanmak, üst öğeden derinlemesine yuvalanmış bir alt öğeye veri göndermeyi daha zor hale getirdi. Sonuç olarak, geliştiriciler Vuex Store ve Event Hub'ı kullanmak zorunda kaldı. Vue 2.2.0 ayrıca sağlama/inject'i de içeriyordu, ancak genel program kodunda kullanılması tavsiye edilmedi.
Ancak, Vue3'te geliştirilmiş sağlama/enjekte etme kombinasyonunu kullanarak, verileri daha hızlı ve düzgün bir şekilde iletebiliriz. Adından da anlaşılacağı gibi, bu alt öğelerin ne kadar iç içe olduğuna bakılmaksızın, verileri bir üst öğeden alt bileşenlerinden herhangi birine erişilebilir kılmak için kullanırız. Burada, sağlamayı nesne veya işlev olarak kullanabiliriz.
Işınlanma
Oluşturmak istediğiniz uygulamanın mantığına bağlı olarak bileşenleriniz, görüntülenmesini istediğiniz yerden farklı yerlerde gösterilebilir. Örneğin, görünmesi ve tüm ekranı kaplaması amaçlanan bir açılır pencere oluşturmak isteyebilirsiniz. Bunun üstesinden gelmek için CSS'de bu tür bileşenlerin position niteliğini kullanabiliriz, ancak Vue3 ile geliştiriciler Teleport'u da kullanabilir.
Teleport, programcıların ilk kapsayıcısından sarıldığı bir öğeyi almalarına ve bunları kullanımda oldukları sayfada zaten var olan herhangi bir bileşene taşımasına olanak tanır. Örneğin, bir başlık öğesini #app div'den başlığa taşıyabilirsiniz. Öğeleri Vue DOM'nin dışında bulunan kod bileşenlerine taşımak için yalnızca Işınlan'ı kullanabileceğinizi unutmayın.
Parça
Vue 2'de bir dosyanın şablonunda birkaç kök bileşene sahip olmak zordur. Programcılar, aynı çözüm için tüm bileşenleri bir ana bileşene dahil etmeye başladılar. Bazen, programcıların bir öğeyi etrafına sarılmış bir kap olmadan oluşturması gerekebilir. Vue3'e eklenen bir özellik olan Fragments sayesinde, mühendisler artık kök şablon dosyalarında çok sayıda öğeye sahip olabilir.
Küresel Vue API'sı
Vue.component veya Vue.use'u bir Vue uygulamasının main.js dosyasında sık sık bulabilirdiniz. Bunlara Global API'ler denir ve Vue 2'de bu tür birçok yöntem vardır. Burada uygulamanızın birden fazla örneğine sahipseniz, hepsi Vue'nun üstüne yerleştirilir. Belirli işlevleri tek bir uygulama örneğiyle sınırlamak zordur.
Vue3, createApp adlı yeni bir Global API sunarak bu sorunu çözer. Bu yöntemle, bir Vue uygulamasının yeni bir örneğini alabilirsiniz. Vue 2.x ile ilgili tüm API'ler, ayrı uygulama örneklerine aktarılacaktır. Bu, uygulamanızın her örneğinin, halihazırda kullanımda olan diğer örnekleri kesintiye uğratmadan kendisine özel işlevlere sahip olmasını sağlar.
Etkinlikler API'sı
Vuex Store'u kullanmaya ek olarak, Event Bus kullanımı, programcıların ebeveyn-alt bağlamını paylaşmayan öğeler arasında veri aktarmak için kullandıkları en popüler yöntemlerden biridir. Ancak $on, $off ve $once gibi kodların tümü Vue3'te silindi. Ancak $emit, alt öğelerin üst öğelerine olaylar yayması gerektiğinden hala erişilebilir. Buna bir çözüm, sağlama/enjeksiyon kullanmak olacaktır.
Vite destekli yapı araç zinciri
Vue'nin yaratıcısı Evan You tarafından tasarlanan Vite, hafif ve oluşturması hızlı, birinci sınıf bir Vue SFC destek araç zinciridir. Vite artık standart Vue3 yapı yapılandırmasının arkasındaki motordur. Web paketinin üzerine inşa edilen modül paketleyici @vue-cli/service , tüm Vue uygulamanızı başlatma, yeniden yükleme ve derleme sırasında sarar. Öte yandan Vite, program kodunuzdan ES İçe Aktarma sözdizimini alacak ve bir HTTP isteği göndermeden önce tarayıcının her içe aktarmayı analiz etmesine izin verecektir.
Değişiklik öncelikle hız nedeniyle yapılıyor. Sunucu, JavaScript bileşenleri için yerel tarayıcı desteği kullandığından hemen başlar ve çok daha hızlıdır.
Kompozisyon API sözdizimi
Seçenekler API'si, öğe durumları ve mantığı oluşturmak için kullanıldı. Composition API, Vue3 tarafından aynısının yerini almak üzere başlatıldı. Yalnızca, içe aktarılan yöntemleri kullanarak seçenekleri tanımlamadan Vue öğeleri oluşturmamızı sağlayan bir API koleksiyonudur.
Kompozisyon API'si aşağıdaki API'leri içerir:
Reaktivite API'si - Örneğin, ref() ve reaktif(). Bunu kullanarak doğrudan reaktif durum, hesaplanmış durum ve izleyiciler oluşturabilir.
Yaşam döngüsü kancaları - Örneğin, onMounted() ve onUnmounted(). Yaşam döngüsü kancalarını kullanarak öğe yaşam döngüsüne bağlanabiliriz.
Bağımlılık ekleme - Örneğin, sağlama() ve enjekte(). Vue'nun bağımlılık enjeksiyon sisteminin Reaktivite API'leri ile kullanılması, bağımlılık enjeksiyonu ile mümkün olur.
Kompozisyon API'lerini kullanmanın artıları
Seçenekler API'sine kıyasla Kompozisyon API'lerini kullanmanın başlıca avantajları şunlardır:
- Vue3 ile reaktif bir durum oluşturmak için artık bir öğe gerekli değildir.
- Çok sayıda reaktif özellik eklerken, Vue.js öğelerindeki kurulum şişebilir. Bu nedenle, bu reaktif değişkenlerin ayrı javascript dosyalarında özetlenmesi faydalı olabilir.
- Composition API'nin ana yararı, Composable yöntemleri şeklinde açık ve etkili mantığın yeniden kullanılmasını mümkün kılmasıdır. Seçenekler API'sinde mantığı yeniden kullanmanın ana yöntemi olan karışımlarla ilgili tüm sorunları giderir.
- Kompozisyon API'sine tam tür çıkarımıyla kod yazabilirsiniz.
- Composition API'de yazdığınız programlar daha verimlidir ve değişkenlerin isimleri daha küçük yapılabilir. Bu, ek yükü azaltır.
- Composition API ile program kodunuzu daha iyi paylaşabilirsiniz.
Pinia
Pinia, Vue.js için hafif bir durum yönetimi aracıdır. Öğeler ve sayfalar arasında bir durumu paylaşmamızı sağlar. Vue3'teki yeni reaktivite konseptini kullanarak kullanıcı dostu, tamamen yazılan bir durum yönetimi çerçevesi oluşturur. Bu artık Vue3'ün yeni standart durum kontrol kitaplığıdır.
Pinia başlangıçta Vuex'in potansiyeline yönelik bir çalışma olarak hizmet etti. Uzun bir süre Vuex, Vue için önerilen eyalet yönetim sistemiydi, ancak Vue3 ile Pinia, resmi belgelerde eyaletleri yönetmek için önerilen sistemdir. Şu anda, Vuex bakım modunda. Çalışmaya devam etmesine rağmen yeni bir özellik eklenmeyecektir. Yeni uygulamalar için Pinia kullanılması önerilir.
Neden Pinia?
Pinia çok hafiftir ve yalnızca 1 KB'a kadar çıkar. Ek olarak, Vue 2 ve Vue3'teki kodlama deneyiminizi geliştirmek için Vue.js geliştirme araçlarıyla bütünleşir. Pinia, tüm veri türlerinizi çıkardığı için, javascript'te de size tam ve kesin otomatik tamamlama sunabilir. Pinia ayrıca tasarımı gereği modülerdir, kullanıcı dostudur ve genişletilebilir. Genel olarak, Pinia hafif, karmaşık olmayan ve basit görünüyor. Öğelerle uğraşmaya çok benzer ve Vue3'te dinamik programlama için gerekli tüm araçları içerir.
Vue 2 kullanımdan kaldırılacak mı?
Vue 2 için son küçük güncelleme, Temmuz 2022'de yayınlanan Vue 2.7 idi. Vue 2 şu anda bakım modunda. Hiçbir ek özellik gönderilmeyecek olsa da, 18 ay boyunca önemli hata düzeltmeleri ve güvenlik yamaları almaya devam edecek. 2023'ün sonunda Vue 2 kullanımdan kaldırılacak.
Vue 2'den Taşıma
Yazılımınıza bağlı olarak, Vue 2 kullanarak çok büyük bir proje üzerinde çalışıyorsanız, Vue3'e geçiş yapmaya değmeyebilir. En iyi optimizasyon çabalarınıza rağmen verimlilik sorunları devam ederse Vue3'ü kullanın.
Uygulamanızı Vue3'e geçirmek isteyip istemediğiniz, boyutuna ve karmaşıklığına bağlıdır. Vue 2'deki sözdizimi ve tekniklerin çoğu, Vue3'tekiyle aynıdır. Ancak, yukarıda bahsedilen değişikliklerden bazılarını kullanmak istiyorsanız, geçiş yapmak daha iyi bir fikir olacaktır.
AppMaster projesinde Vue.js
AppMaster platformu, kullanıcılarımız için bir ön uç uygulaması oluşturmak için VueJS çerçevesini veya çerçevenin üçüncü sürümünü kullanır. Vue 3, yönetici, paneller ve müşteri portalları oluşturmak için kullanılır ve AppMaster stüdyosunun tüm arayüzü aslında VueJS çerçevesi kullanılarak yapılır.
Ürünümüzü hızlı ve verimli bir şekilde geliştirebilmek için mikro ön uçlar veya ön uç mikro hizmetler adı verilen özel bir yaklaşım kullanıyoruz; örneğin, her bir veri modeli düzenleyicisi ve iş süreci düzenleyicisi , platformumuzda tamamen ayrı bir ön uç uygulamasıdır. Bu, ürünümüzün genel hızını artıran geliştirme ekibinin bakış açısından çok hızlı ve bağımsız geliştirmemizi sağlar. Müşterilerimizin tüm bu avantajları uygulamalarımızı kullanarak elde edebilirler.
Gelecekte, SPA tek sayfalık uygulama moduna ek olarak, müşterilerimizin yalnızca yönetici panelleri ve özel portallar oluşturmalarına değil, aynı zamanda çok işlevli tam özellikli web siteleri oluşturmalarına olanak tanıyan SSR (sunucu tarafı oluşturma) modunu da ekleyeceğiz. yüksek SEO optimizasyonu.
Kodsuz hakkında
Kodlamanın demokratikleşmesini etkileyen kilit unsurlardan biri kodsuz geliştirme yaklaşımıdır . Günümüzde, daha fazla sayıda insan, kodlamanın yokluğu ile genel olarak programlamaya erişebilmektedir. Web tasarımını, mobil uygulama geliştirmeyi ve duyarlı web geliştirmeyi daha basit hale getirir.
AppMaster, otomatik olarak kaynak kodu oluşturmak için kullanılabilecek uygulamalar arasındadır. Kodu her an görüntüleyebilir ve inceleyebilirsiniz. AppMaster ile bilgisayar dilini kullanarak proje bilgilerini özelleştirme seçeneğine sahipsiniz. Ayrıca insanların isterlerse kodu dışa aktarmalarına da izin veriyoruz. Bu, AppMaster ile üzerinde çalıştığınız uygulama üzerinde tam kontrole ve sahipliğe sahip olduğunuzun garantisidir.
Sonuçlar
Vue3'ün Vue 2'den nasıl farklı olduğuna dair daha ayrıntılı bir açıklama ve kod parçacıkları istiyorsanız, resmi Vue.js belgelerini inceleyebilirsiniz. Farkında olmanız gereken büyük değişikliklerin çoğundan bahsettik. Bu çerçeve ile uygulamalar oluşturmakla ilgileniyorsanız, Vue3 güncellemelerinden haberdar olmanız önemlidir.
