Vue 3.0 web geliştirme için ne anlama geliyor?
Geçen yıl Kasım ayında You Yuxi, Vue 3.0'ın önemli bir güncellemesini duyurdu. Yeni sürümün getirdiği optimizasyonlar, Vue'yu daha verimli, daha modüler ve kullanımı daha kolay hale getiriyor. Bu makale, bu değişiklikleri ve Vue 3.0 yayınlandıktan sonra web geliştirme dünyasını nasıl etkileyeceğini düşündüğümü tartışacak.
Vue'nun mevcut durumu
Vue, "kullanıcı uygulamaları oluşturmak için ilerici bir çerçevedir". Tasarımı çok esnektir, tek bir Vue kitaplığını diğer projelere entegre edebilir veya karmaşık projeler oluşturmak için Vue'yu kullanabilirsiniz.
Vue genellikle anlaşılması ve uygulanması kolay bir çerçeve olarak kabul edilir. Saf HTML şablonlarını desteklerken, React'in DOM öğelerini tanımlamak için JavaScript'i kullanması gerekir.
2019'un başlarından itibaren hala Vue 2.0 kullanıyoruz. React ve Angular ile karşılaştırıldığında, Vue şu anda sadece küçük bir pazar payına sahip, ancak Vue'nun popülaritesi artıyor. Kanımca, Vue 3.0'ın piyasaya sürülmesi benimseme oranını artıracak ve kendisini diğer ana çerçevelere bir alternatif haline getirecek.
Aşağıdaki şekil, her çerçeveye karşılık gelen işlerin sayısını gösterir. Vue'nun mevcut endüstri standartlarına yaklaşmadan önce daha uzun bir yol kat ettiği görülebilir.
Vue 3.0'daki büyük değişiklikler
You Yuxi açılış konuşmasında Vue 3.0'daki beş önemli değişikliği vurguladı:
Şimdi bu değişiklikleri inceleyelim.
Daha hızlı
Bu konu konuşmanın çoğunu kaplıyor, çünkü en önemli teknolojik değişimi yansıtıyor ve Vue'nun şu anki ana satış noktalarından biri.
Vue, işleme hızı ile bilinir. Karşılaştırmalı testte performansı diğer çerçevelerden daha iyidir. Bununla birlikte, 2.0'daki kod düzeltmeleriyle karşılaşan Vue ekibi, mikro optimizasyon yöntemlerini kullanarak işleme kodunu tamamen yeniden yazmaya karar verdi. Yuxi, bu optimizasyonların montaj ve başlatma hızını iki katına çıkarabileceğini söylediniz.
Diğer çerçeveler gibi, Vue da bileşenleri işlemek için sanal DOM kullanır. Oluşturma sürecini hızlandırmak için sanal DOM'un iş yükünün azaltılması gerekir. 3.0 Hızlandırma amacına ulaşmak için aşağıdaki yollarla:
Derleme zamanı ipucu Rendering sürecini derinlemesine inceleyerek, Vue 3.0 kod optimizasyonunu göstermek için daha iyi derleme zamanı istemleri üretecektir;
Bileşen hızlı yol Vue 3.0, şablon nesnesinin bir bileşen olup olmadığını kontrol etmez, ancak büyük harfin bir bileşen olduğunu varsayar. Bu varsayım, tahmin yürütmeyi önler ve oluşturma sürecini hızlandırır.
Monomorfik çağrı Bir bilgisayar bilimi dersi almış olan herkes polimorfizm kavramını bilir, ancak Vue 3.0 oluşturma sürecinde monomorfik çağrıları kullanır. Bu tür bir mikro optimizasyon, her zaman aynı şekle sahip nesneleri oluşturma motoruna geçirir, bu da Javascript motorunu optimize etmeyi kolaylaştırır.
Slot oluşturmayı optimize edin -Bu görünüşte karmaşık terim aslında basit bir konsepte indirgenebilir: örneğin bağımlılıklarını takip etmesini sağlamak için. Şu anda, üst ve alt bileşenlerin bağımlılıkları güncellendiği sürece, her ikisi de yeniden oluşturmak zorunda kalacak. 3.0'da, üst ve alt bileşenlerin farklı bağımlılıkları olabilir ve yalnızca bağımlılıkları değiştiğinde güncellenmeleri gerekir. Bu, sayfanın yeniden işlenme sayısını büyük ölçüde azaltır.
Statik ağaç kaldırma (Statik ağaç kaldırma) -Bu yeni bir özellik değil (zaten Vue 2.0'da mevcut), ancak mühendislik hızını büyük ölçüde artırıyor. Adından da anlaşılacağı gibi, herhangi bir bağımlılığı olmayan statik öğeler yeniden oluşturulmaz. Bu, sanal DOM'un iş yükünü büyük ölçüde azaltır ve birçok proje ek yükünden tasarruf sağlar.
Temsilci tabanlı gözlem -Vue 3.0, elemanların reaktivitesini izlemek için ES2015 aracı tabanlı gözlemleri kullanacaktır. Bu değişiklik yalnızca Vue 2.0'ın destekleyemediği birkaç durumu ortadan kaldırmakla kalmaz, aynı zamanda daha iyi performans da getirir. Yuxi, bu optimizasyonların bileşen örneklerinin başlatma hızını iki katına çıkarabileceğini ve bellek kullanımını yarıya indirebileceğini söylediniz.
Daha hafif
Şu anda, Vue'nun hacmi çok küçüktür (sıkıştırmadan sonra 20KB). Ağaç sarsıntısı optimizasyonu nedeniyle (önemli olmayan kodun ortadan kaldırılması), 3.0'lık tahmini boyut yaklaşık 10KB'dir (sıkıştırmadan sonra). Önemli olan, Vue projesi için çok önemli olmayan kitaplıkları kaldırmaktır.Bunları ana src kodunda paketlemek yerine import deyimi aracılığıyla kullanabilirsiniz.
Sürdürülebilirliği artırın
Flow'dan TypeScript'e Vue 3.0, Flow'dan TypeScript'e geçecektir. Bununla birlikte, kod tabanı TypeScript'te yeniden yazılacak olsa da You Yuxi, uyumluluğa ve kullanım kolaylığına büyük önem verdiklerini ve TypeScript kullanmayı sevmeyen kullanıcıların yine de saf JavaScript kullanabileceğini açıkça belirtti.
Dekuplaj paketi Mevcut durumla karşılaştırıldığında, Vue 3.0 daha iyi modülerlik sağlar, bu da onu daha özelleştirilebilir ve esnek hale getirir.Ayrıca şeffaflık sağlar ve geliştiriciler kaynak koduna dalabilir.
Derleyici yeniden yazma Bu beni en çok heyecanlandıran özelliklerden biri. Bu değişiklikler sadece daha iyi IDE desteği sağlamakla kalmaz, aynı zamanda bir kaynak haritası oluşturur.Çalışma zamanı hatası varsa, hataya karşılık gelen dosya konumunu ve satır numarasını verir. Şimdi Vue kullanıyorsanız, çalışma zamanı hata mesajlarının sorunu tanımlamada çok az yardımcı olduğunu bilmelisiniz. Bu güncelleme, geliştiricilere yeni bir soluk getiriyor.
Yerli için
Vue 3.0 platformdan bağımsız olacak - saf JavaScript çalıştıracak ve ana yapısında Node.js gibi şeylerin kullanımını üstlenmeyecek. Bu esneklik, web, iOS veya Android uygulamaları oluşturmayı kolaylaştırır. Yerli olmak, Vue'yu React'e bir alternatif haline getiriyor.
Geliştiriciler için kolaylaştırın
Basit görünmesine rağmen, bence bu Vue-basit ama güçlü kullanmanın temel avantajı, bunların hepsi iyi yönler.
Reactivity API'yi ortaya çıkarın -Yeni değişiklikler, geliştiricilerin açıkça reaktif nesneler ve özel yeniden oluşturma kancaları oluşturmasına olanak tanır. 3.0 ayrıca Vue kullanıcılarının sık sık şikayet ettiği bir sorunu da çözer: bileşenler ne zaman ve neden yeniden oluşturulmalıdır?
3.0, insanların güncellemeyi neyin tetiklediğini görebileceği bir renderTriggered olayı sağlar. Bu mükemmel özellik, Vue'yu daha şeffaf hale getirecek.
Yani?
"Ne olmuş yani? İnsanlar yine de React veya Angular kullanacak" diye düşünüyor olabilirsiniz. Haklı olabilirsin. Mevcut endüstri standartları olarak React ve Angular, en popüler bileşen çerçeveleri olarak statülerini korumaya devam edebilir. Ancak, Vue 3.0'ın getirdiği bazı ilginç şeyler onu önümüzdeki yıllarda daha rekabetçi hale getirebilir.
hız . Şimdi bile Vue, React veya Angular'dan daha hızlı işleme hızları sağlıyor. Yeni mikro optimizasyonlar uygulayarak, Vue'nun işleme süresi diğer çerçevelerin yalnızca yarısı olabilir. Bu, diğer ortamlardan bazı geliştiricileri çekebilecek bir anahtardır. Aşağıdaki tablo Vue 2.0'ın hız ve bellek açısından avantajlarını göstermektedir ve yeni sürüm bu avantajları daha da güçlendirmelidir.
Uyarlanabilirlik . Vue'nun tasarım hedeflerinden biri, uygulanması kolay olmaktır. İster mevcut bir projeye ekleyin ister bir SPA inşa etmek için kullanın, gereksinimlerinizi tanımlamanıza yardımcı olacak birçok belge ve kullanım durumu vardır. Vue 3.0'ın getirdiği yeni özellikler (özellikle reaktif kancalar ve yeni modüler tasarım) bu esnek çerçeveyi daha güçlü hale getiriyor. Vue'nun basitliğini her zaman vurgulamış olsam da, daha deneyimli geliştiricilere projelerini kontrol etmeleri için daha fazla yol sağlıyor.
Dokümantasyon . Tek başıma öyle mi düşündüğümü bilmiyorum. Kişisel olarak Vuenun belgelerinin React'ten daha kolay anlaşılacağını düşünüyorum. Aslında, Vue'yu Hello World öğreticisi aracılığıyla öğrenmeme bile gerek yok, belgeleri, onu nasıl kullanacağımı anlamamı sağlamak için yeterli.
Zorluk - Tıpkı dokümantasyonu gibi, Vue de çok uygulamalı. Yalnızca HTML, CSS / CSS ön işlemcileri (sass ve scss gibi) ve JavaScript kullanmakla kalmaz, aynı zamanda çerçeve için birçok destek ve kitaplık sağlar. Yeni geliştiricilerin başlaması çok kolaydır ve kıdemli geliştiricilerin becerilerini genişletmesi çok kolaydır.
Vue 3.0'ın tam etkisini görmek için 2019'a kadar beklememiz gerekiyor (umarım). You Yuxi'nin Toronto'daki VueConf'ta gösterdiği özellikler, Vue'yu daha güçlü ve verimli kılıyor gibi görünüyor, bu yüzden yeni sürümden beklentilerim doluydu.
Orijinal İngilizce: https://medium.com/@mattmaribojoc/what-does-vue-3-0-mean-for-web-development-851052fc0138
