Vue vs React: 2021’deki en iyi JavaScript çerçevesinden hangisi?

React veya Vue.js, hangi JavaScript çerçevesini seçmelisiniz?React yeni WordPress editörünü desteklerken Vue.js, Laravel topluluğunda popüler bir çerçeve.Bu yazıda, bu iki popüler çerçevenin ne olduğunu, çeşitli kullanım vakalarını tartışacağız ve nasıl benzer olduklarını ve nasıl farklı olduklarını göreceğiz.Bence birçok yarışmacı web ön uç geliştiricisi Facebook’ta geliştirilen açık kaynaklı JavaScript UI çerçevesini React adlı duydu.Bu, Facebook ve Instagram web sitelerinin çoğunu destekler.Bu aynı zamanda Gutenberg – yeni WordPress editörü tarafından kullanılan bir JS çerçevesidir.
React, javascript dünyasında ortaya çıktığında küçük bir değişikliktir, çünkü jQuery, omurgalı.js ve açısal 1 gibi diğer zaman çerçevelerinden çok farklıdır. En büyük fark, popülerleştirilmiş Dom Virtual’a tepki vermesidir (bunu daha sonra gireceğiz) ve JSX adlı yeni bir sözdizimi yapın, geliştiricilerin JavaScript’e HTML yazmasına izin verir. NE? Vue.js benzer bir web geliştirme aracıdır – bu, React ile aynı sorunun üstesinden gelmeyi amaçlayan bir JavaScript çerçevesidir, ancak farklı şekillerde. Vue.js, şablon sistemini JSX değil, mevcut web uygulamalarına entegre etmeyi kolaylaştırdığını söyleyebilirsiniz. Şablon sıradan HTML kullandığından, Vue.js, oluşturma adımlarına gerek kalmadan mevcut koda kolayca entegre edilebilir. Vue.js, yakın zamanda doğruladığım daha düz bir öğrenme eğrisi olan bir şeye sahip olduğu söyleniyor çünkü Vue.JS’yi tanıyordum. Vue.js ile ilgili bir başka ana şey, gelişiminin Facebook gibi büyük şirketler tarafından desteklenmemesidir.
React ve Vue.js benzerliği birçok benzerliğe sahiptir, çünkü her ikisi de sadece zengin ön uç deneyimleri yapmaya odaklanan JavaScript UI çerçevesidir. ‘Pil dahil’ olan önceki JavaScript çerçevesinden farklı olarak, hem React hem de Vue.js, ayrı bir çerçeve tarafından ele alınan mide ve yönetim durumu gibi işlevsellik ile oldukça basittir. DOM Sanal kullanımı Vue.js ve React arasındaki en büyük benzerliklerden biri ‘Sanal Dom’ olarak adlandırılan şeyin kullanılmasıdır. Sanal Dom temelde göründüğü gibidir, Dom ağacının sanal temsilidir. Bu, DOM’u yenilemenin genellikle bir bilgi işlem ağırlığı olduğu kavramına bağlıdır. JavaScript nesnelerini güncellemek nispeten hafiftir. Sanal DOM ile Herhangi bir unsur için güncelleme, orijinal DOM’da değil, sanal DOM’larda yapılır. Bir şey değiştiğinde, yeni DOM’un sanal nesnesi yapılır ve eski ve yeni belirlenen arasında değişir. Bu değişiklik daha sonra gerçek DOM’a uygulanır. Örneğin, bu listeyi html:
öğe 1
Madde 2
{Type: ‘ul’, sahne: {‘sınıf’: ‘liste’}, çocuklar: [{type: ‘li’, sahne: {}, çocuklar: [‘madde 1’]}, {type: ‘li’ , Sahne: {}, çocuklar: [‘madde 2’]}]} Sanal DOM’ların uygulanması aslında bundan daha karmaşıktır, ancak temel olarak yuvalama dizisi ile yuvalanmış javascript nesnesi.
Bu JavaScript nesnesine yeni öğe eklendiğinde, bir işlev değişimi ‘ayırt eder’ ve orijinal DOM’a yeni işaretleme uygular. Bu ‘farklılık’ algoritması gizli bir sosdur ve hem reaksiyon hem de vue.js bunu biraz farklı bir şekilde yapar. Vue.js’nin değişiklikleri sanal DOM’a daha hızlı ayırt edebildiği bildiriliyor, çünkü oluşturma sırasında her bir bileşenin bağımlılığını izliyor, tüm bileşenleri yeniden oluşturmaya gerek yok. React ile, tüm alt bileşenler uygulama durumu her değiştirildiğinde yenilenecektir. Bu, usorComentUpdate yaşam döngüsü yöntemini kullanılarak üzerine yazılabilir, ancak Vue.js varsayılan olarak bu tür optimizasyonu işler. Bu temel olarak, uygulamanızı her bölümün birbirine ‘konuşma’ için belirtilen yolla ilgili farklı işlevsellik bölümlerine ayırmak anlamına gelir. Bu orta makalede hangi bileşenlerin bulunabileceğinin iyi bir açıklaması: Bileşenleri kullanıcı arayüzünün parçalarını oluşturan küçük özellikler olarak görebilirsiniz. Facebook kullanıcı arayüzü kapsamındaki bileşenleri tanımlarsam, sohbet penceresi bir bileşen olacaktır, yorum yemi başka bir bileşen olacaktır ve sürekli olarak güncellenen arkadaşların listesi diğer bileşenleri temsil edecektir.
Vue.js olarak, bu prensibi izleyen tek bir dosya bileşeni kullanabilirsiniz.//Pastaitem.vue

{{this.item.name}}

{this.item.desc}}
siparişe ekle {{this this . Siparişler}}

Yukarıdaki örnekte görebileceğiniz gibi, JavaScript ve CSS bir dosyada birleştirilir..Vue bileşen dosyanıza CSS eklemeniz gerekmez, ancak bu bir seçenektir.
React’te bu, bileşen dosyalarında eğlenceli olan JavaScript ve JSX işaretleriyle çok benzer. “React” den ithal reaksiyon; Sınıf Pastaitem React.comPonent {render () {const {detaylar, dizin} = this.props; Return (

); }} Varsayılan Pastaitem’i dışa aktar; Yukarıdaki örnekte olduğu gibi nitelikler, hem React hem de Vue.js, özellikler için kısa olan ‘sahne’ kavramına sahiptir. Bu, öğede, ebeveynden child.object.keys’e (this.state.pastadishes) verilerin gönderilmesine izin veren özel bir özelliktir. this.State. Pasfadishas [Key]} addToorder = {this.addtoorder} siparişleri = {this.state.orders [tuş]} />) yukarıdaki örnekte, dizin özniteliği Pastaitem. Bu reaksiyonda gereklidir, çünkü ‘hakikatin tek kaynağı’ olarak hareket eden yerel ‘ülkelere’ (daha da ileride) bağlıdır. Vue.js’de sahne biraz farklı. Bileşenlerde aynı şekilde tanımlanırlar, ancak vue.js şablonun sözdizimine bağlı olduğundan – varsayılan döngü şablonu işlevini kullanmanız gerekir.
Bu biraz daha açık Yan ‘şablon’, ancak bitirme işi ve ben React versiyonu kadar karmaşık hissediyorum. Hem React hem de Vue.js, geliştirme ortamınızla hızlı bir şekilde hazır ve çalıştırmanızı sağlayan bir bootstrap uygulamasına sahiptir. Bu React’de bir Create React uygulaması (CRA) ve Vue.js’de bu bir Vue-Cli. Her iki durumda da, en iyi en iyi uygulamaya göre belirlenen bir proje şablonu alırsınız. Bu, sizi webpack ve Babylon’u kutunun dışında kullanmaya zorlayan bir görüşü olan bir cihazdır. Bir Vue-Cli ile, biraz daha esnek hale getiren bir şablon şeklinde bir seçeneğiniz var. Chrome geliştiricileri hem reaksiyon hem de vue.js, hata ayıklamaya yardımcı olmak için olağanüstü bir krom uzantısına sahiptir. Uygulamanızı diğer web sitelerinde yaptığınız gibi kontrol etmenize izin verirler, ancak Vue.js veya React sürümünü işaretlemenize izin verir. Ayrıca uygulama durumu verilerini görebilir ve güncellemelerin gerçek zamanlı olarak gerçekleştiğini görebilirsiniz. Devtools’un eylemde tepki vermesi:

Vue.js Devtools Eylem:

İki çerçeve arasındaki nihai enstitü (ve fark) çerçevesi, refakatçi çerçevesini nasıl ele aldıklarıdır. Hem React hem de Vue.js yalnızca UI katmanına odaklanır ve mide ve işleme durumu gibi işlevselliği refakatçi çerçevesine bırakır. Vue.js ve reaksiyon arasındaki fark, bunların kendi refakatçi çerçeveleriyle nasıl ilişkili olduklarıdır. Vue.js çekirdek ekibi, Vue-Rower ve Vuex çerçevesini korur ve Vue’nun ana şemsiyesi altında saklar. React-Touter ve React-Redux topluluk üyeleri tarafından yönetilir ve Facebook/React şemsiyesi altında ‘resmi’ değildir. Temel fark Vue.js ve React’in birçok benzerliği olmasına rağmen, bazı temel farklılıklar vardır. REACT ve VUE.JS arasındaki en büyük farka karşı şablonlar yapmak bir şablon yapmanın yoludur. Vue.js’de, şablonlama için sıradan HTML kullanmanız önerilir. Bu yaklaşım, standart HTML öğeleri üzerinde özel özellikler kullanır.

{{{{{{{lie.msg}}}

öznitelik kutusu Ayrıca, bileşenin sözdizimini JavaScript ve geçerli HTML olarak değiştirmek için üretim adımlarını gerektirse de, tek bir dosya bileşeninde de kullanılabilir.

Vue.js, bıyık stili sözdizimine sahip dinamik içerik ürettiği bilinen açısal stil yöntemini kullanırken, bir şey oluşturmak için HTML kullanımını teşvik eder.Bu nedenle, Vue.js’nin mevcut uygulamalara entegre edilmesi tartışmasız daha kolaydır, çünkü Vue.js şablonlarını çok fazla ek yük olmadan mevcut şablonlara kolayca ekleyebilirsiniz.Bunun aynı zamanda yeni gelenlerin bu sözdizimine uyum sağlamasını kolaylaştırdığı bildiriliyor.Öte yandan React, JSX adı verilen ‘JavaScript’e Sözdizimi Uzantısı’nı kullanarak tüm şablon kodunuzu JavaScript’e yazmanızı önerir.Örneğin, jsx:
{object.keys (this.state.pastadishes) .map (Key => )}
React/JSX ilk bakışta daha uzun soluklu görünüyor, ancak şablonda JavaScript kullanma yeteneği ekleyerek geliştiriciye daha fazla güç verilir. Ama unutmayın: Büyük bir güçle büyük sorumluluklar gelir. Ben Parker JSX gerçekten sadece bazı komik XML sözdizimi ile JavaScript. Ancak, buna alıştıktan sonra çok daha esnek ve daha güçlü hissediyor. Bu benim kendi önyargım olabilir, ama bunun daha iyi bir yaklaşım olduğunu hissediyorum çünkü hiç açısal stil özniteliği kaos hayranı olmadım. Görünüşünüz/bileşeniniz, sorunun ayrılmasını koruyun. Vue.js’nin React gibi oluşturma ve JSX işlevlerini teknik olarak desteklediği de belirtilmelidir, ancak varsayılan yaklaşım değildir. Ülke Yönetimi VS Mülkiyet Nesnesi Tepki vermeye alışkınsanız, uygulama durumunun önemli bir kavram olduğunu bileceksiniz. Redux gibi büyük ölçekli durum nesnelerini yönetmeye adanmış bir çerçeve bile vardır. Ek olarak, React uygulamasındaki durum verileri değiştirilemez, yani doğrudan değiştirilemez (bu tamamen doğru olmasa da). React olarak, yerel durumdaki herhangi bir şeyi değiştirmek için SetState () (Hook Us ()) yöntemini kullanmanız gerekir.
AddToorder (tuş) {// this.state const siparişlerinin bir kopyasını oluşturun = {… this.state.orders};// Siparişleri güncelleyin veya ekle [Key] = Siparişler [Anahtar] + 1 ||1;this.setState ({siparişler});} Vue.js ile yerel durum nesnelerine gerek yoktur ve veriler VUE nesnelerindeki veri özelliği aracılığıyla yönetilir.Dışa aktarma {name: ‘App’, data () {return {Paparta örnekleri: örnekler, siparişler: {}}}, … Yöntemler: {handeorder: function (anahtar) {if (! tuş)) {this. $ set (this.orders, tuş, {count: 0});} this.orDers [tuş]. Montaj += 1;
Vue in Vue, SetState () gibi durum yönetimi işlevini çağırmanız gerekmez, çünkü VUE nesnesindeki veri parametreleri uygulama veri tutucuları olarak işlev görür. Büyük ölçekli uygulamalar için devlet yönetimi konusunda, Evan You, Yaratıcı Vue.js, bu tür bir çözümün küçük ölçekli uygulamalar için uygun olduğunu, ancak daha büyük uygulamalar için boşaltılamayacağını söyledi. Çoğu durumda, çerçevenin kendisi tarafından sağlanan varsayılan durum yönetimi modeli büyük ölçekli uygulamalar için yeterli değildir ve Redux veya Vuex gibi özel çözümler kullanılmalıdır. Bunu hatırlayarak, uygulamanızda durumun nasıl yönetildiğini tartışmak muhtemelen erken bir optimizasyon olabilir ve çoğu şey gibi bu kişisel tercihler meselesidir. Ayrıca, bunun için endişelenmenize gerek olmayabilir. Hook, 2019’da React için en büyük güncellemelerden biri reaksiyona girer. React 16.8’de kancaların eklenmesidir. Kancalar büyük bir sorundur çünkü durumsalın fonksiyonel bileşenini tanıtırlar. Bu, bileşen yapmak için artık ES2015+ sınıf sözdizimini kullanmanız gerekmediği ve çok daha az işlevsel sözdizimi kullanabileceğiniz anlamına gelir. Örneğin, sınıf sözdizimi kullanarak bileşenler yapmak için minimum kod sayısıdır: sınıf myComponent React.component {constructor () {süper (); this.state = {somestatevalue: true}; } handleclick = event => {this.setState ({somestateValue :! this.state.somestateValue}); }; Render () {return (
reaksiyon sınıfı testi
{“ “ Durum: $ {this.state.somestateValue}}
this.handleclick ()} > Geçiş durumu
); }} Reactdom.render (, Document.getElementById (‘kök’)); Ve kancalarla: const myComponent = props => {const [somestateValue, setSomestate] = react.usestate (true); Return (
reaksiyon kanca testi
{“ state: $ {somestatevalue} `}
setSomestate (! Somestatevalue)}> geçiş durumu
); }; Reaksiyon Gördüğünüz gibi, fonksiyonel sözdizimi ile, sadece daha az kod değil, aynı zamanda ne olduğunu görmek daha kolay. Kancalardaki en büyük ekleme, usestate () ve useffect () gibi yeni varsayılan kancaların eklenmesidir. Usestate (), bir bileşendeki durumu yönetmek için bir kanca yöntemidir. This.setState () kullanmak yerine, USESTATE () yönteminin iki değişkenine zarar verirsiniz. İlk değişken ülkenin mülkü ve ikinci değişken ‘ayar’ işlevidir. Örneğin, yukarıdaki kodda [somestatevalue, setSomestate] = react.usestate (true); . SomestateValue, bileşenlerimizde kullanacağımız durum değeridir ve SetSomestate aslında durumumuzu güncellemek istediğimizde arayacağımız bir işlevdir. Bkz. CODEPEN’de Peter (@Tasker82) tarafından Pen Numune React Hooks. Kancalarla ilgili bir diğer büyük artış, ‘yaşam döngüsü’ sınıfının bir useeffect () ile değiştirilmesidir. Bu, ‘ComponentDidMount (), ComponentWillUlLUnmount () vb.’ sarhoş. React belgesine uygun olarak, bileşen ‘yüklendiğinde’ bir şey yapmak istiyorsanız
(DOM’a eklendi) ve bileşen güncellendiğinde, iki farklı yöntem kullanmalısınız: componentDidMount () {document.title = `Clickd $ {this.state.count} Times ‘; } ComponentDatDate () {document.title = `$ {this.state.count} times ‘tıkladınız; } Useffect () kancasıyla, her iki durumu da işleyen bir işleviniz var: useffect (() => {document.title = `$ {count} times ‘;}); UsEffect kancaları, bileşen serbest bırakıldığında (bileşen willUlLUnMount’un değiştirilmesi) ve etkiyi yalnızca belirli değerler oluşturma arasında değişmediğinde çalıştıracak şekilde sınırlandıran bu basit örnekten çok daha güçlüdür. Düzgün bir kancanın başka bir kısmı, kendi özel kancanızı yapabilmenizdir. Bu, ‘bileşenlerin mantığını yeniden kullanılabilecek bir işlev haline getirmenizi’ sağlar. Yani, yeniden kullanım bileşenleri gibi uygulamanız boyunca yaşam döngüsünü yönetme durumunu ve kodunu yeniden kullanabilirsiniz. Vue 3 – API Kompozisyonu Yani, Vue.js’in React Hook gibi bir şey var mı? Vue 2.x değil ama Vue 3 yakın. Sürüm 3’teki yeni özelliklerden biri API kompozisyonu denilen bir şeydir. Daha ileri gitmeden önce Vue 3’ün ‘Alfa öncesi’ aşamasında olduğunu söylemeliyim

, bu yüzden 3 sürüm 3 resmi olarak piyasaya sürüldükten sonra bazıları değişebilir. React’e kancaların eklenmesinin bazı nedenleri VUE.JS için de geçerlidir. Vue.js genellikle daha basit bir yangına sahiptir, verileri ayırır ve hesaplanan özelliği. Büyük uygulamalara ne olabileceği, bu daha basit arayüzün yeniden kullanılabilecek kodların oluşturulmasını zorlaştırabileceğidir. Geliştiriciler nihayet düşünülmesi zor olan büyük bileşenler yapabilir – React sınıfı gibi! Bazı Vue 2 koduna bakalım:

Vue 2 Testi

Aç mı? {{Hungry}}

Yemek? {{Seteating}}

geçiş }; }, Hesaplandı: {seteating: function () {if (! This.hungry) {return true; } return false; }}, yöntemler: {updateAreating: function () {return (this.hungry =! this.hungry); }}}; Bu süper basit örnekte, nasıl izlenecek üç farklı yöntemimiz olduğunu görebilirsiniz: data (), computed () ve yöntemler (). Ayrıca, bu anahtar kelimeyi kullanarak anında değişkenlere atıfta bulunarak sözde tabanlı arayüz sözdizimine güveniyoruz. Vue.js sürüm 3’te, tüm bu veriler aynı yönteme yerleştirilebilir. Not: Vue 3 Kompozisyon API’sını kullanmak için bir @Vue/Composition-Api paketi eklemeniz ve Vue.js projenize eklemeniz gerekir.

Vue 3 Testi

Aç mı? {{hungrystate.hungry}}

Yemek? {{Seteating}}

‘@Vue/composition-api’ dışa aktarma varsayılan {setup () {setup () {reaktif, computed} ‘ni geçiş
Yukarıda oluşturulan örnekte, işlerin bir kurulum () yönteminde nasıl birleştirilebileceğini görüyoruz. Bu, daha sıkı ve biraz daha fazla kullanımı basitleştiren bir kod koleksiyonuna izin verir. API kompozisyonu için Vue 3 RFC’de, bu kuruluşun yönteminin iki ana nedeni vardır: karmaşık bileşen kodları zaman zaman özellikleri zaman zaman düşünmek zorlaşır. Bu, özellikle geliştirici yazmadıkları kodu okuduğunda olur. Kök neden, mevcut API vue.js’nin kod organizasyonunu seçeneğe göre zorlamasıdır, ancak bazı durumlarda kodu mantıksal sorunlara dayanarak yönetmek daha mantıklıdır.
Birçok bileşen arasında mantığı çıkarmak ve yeniden kullanmak için temiz ve serbest mekanizmaların olmaması.
React Hooks gibi, Vue 3 kompozisyon API dahildir, eski opsiyon yangınları hala desteklenir.Jeneratör Sitesi Statik Son yıllarda React dünyasına gelen bir sonraki en büyük şey, özellikle Gatsby olmak üzere statik bir site jeneratörüdür.Görünüşe göre JS tabanlı statik site jeneratörünün büyük bir sorun haline geldiği bir yerden – bu özellikle Gatsby için geçerlidir.Gatsby’ye aşina değilseniz, temel olarak bu, statik bir HTML dosyası oluşturmak için React ve GraphQL’e dayanan bir yapı sistemidir.Gatsby hakkında daha önce yazdım ve Vue’nun benzer bir aracı olup olmadığını merak ettim.Görünüşe göre, gerçekten – ızgara.Gridsome’u denemek için zamanım olmadı, ama Gatsby Vue hissediyor gibi görünüyor.Tıpkı Gatsby gibi, birkaç içerik kaynağı (yangın, başsız CMS ‘
), içeriğin içeriğini belirlemek, fiyat azaltmada içerik yazmak ve daha önce oluşturulan ilk şablondan yeni bir site oluşturmak için GraphQL kullanarak. Gridsome özellikleri listesinden yola çıkarak, Gatsby ile parite özelliklerine ulaşmış gibi görünüyor. GridSome gibi bir şeyle gördüğüm en büyük sorun, Gatsby’nin popülaritesinin üstesinden gelmek. Github yıldızının yüzeysel metriği tarafından tamamen görülen Gridsome, 5.6K’ya sahipken, Gatsby’nin 42.6k ile ~ 9x var. Bu bir sonraki noktaya gidiyor – pazar payı. 2020’deki hisse senetleri, sadece birkaçı React’in popülerlik açısından en iyi JavaScript çerçevesi olduğunu iddia edecek. İyi ya da kötü, görünüşe göre React hala orada olacak. Popülerliği nedeniyle, çevrimiçi olarak mevcut olan reaksiyonlar için birçok dokümantasyon ve öğretici vardır. Büyük bir pazar payının yan etkileri kalkınma hızıdır. React, Şubat 2019’da React Hooks’u gönderirken, Vue 3 bu makale yazıldığında hala ilk alfa aşamasındaydı. Şimdi, “Ama React büyük bir şirket olan Facebook tarafından destekleniyor!?!
“Bu doğrudur, bu yüzden belki de tepki veren, gelişimi hızlandıran daha fazla insan vardır.Tüm bunlar, React’in şimdilik ön uç çerçeve manzarasına hükmetmeye devam edeceğini söylemek için.Bu esas olarak WordPress editörleri için geçerlidir, çünkü hepsi React ve ilgili çerçevelerle oluşturulur.Bu popülerlikle, iş ve kariyer beklentileri hakkında konuşmak iyidir.React çalışması daha fazla talep görüyor, en yüksek ücretli ve geliştirici zihin paylaşımının çoğuna sahip gibi görünüyor.Ama her şey gibi, zamanla değişir.Söylenen her şey, kariyer büyümesi, reaksiyon almayı veya vue’yi almayı düşünürseniz düşünmeye değer bir şeydir.Mesele şu ki, ‘bir tür kapsamlı’ bir resmi