Bunun hakkında konuşma, aynı uygulamayı oluşturmak için Vue ve React'i kullanmak arasındaki fark nedir?
Yazar | Sunil Sandhu
Tercüman | Cehalet
İşimde Vue kullandıktan sonra, oldukça derin bir anlayışa sahibim. Aynı zamanda React'i de merak ediyorum. React belgelerini okudum ve bazı eğitici videolar izledim. Harika olsalar da, gerçekten bilmek istediğim şey React ve Vue arasındaki fark. Burada bahsedilen fark, hepsinin sanal bir DOM'a sahip olup olmadığı veya sayfayı nasıl oluşturdukları anlamına gelmez. Gerçekten yapmak istediğim şey, kodlarını yan yana karşılaştırmak ve bu iki çerçeveyi kullanarak uygulamalar geliştirirken ne gibi farklılıklar olduğunu bulmak.
Kullanıcıların yapılacaklar öğeleri ekleyip silebileceği standart bir yapılacaklar uygulaması oluşturmaya karar verdim. Bu uygulamayı oluşturmak için varsayılan CLI'lerini (react's create-react-app ve Vue'nun vue-cli'sini) kullandım. Öncelikle bu iki uygulamanın görünümüne bakalım:
İki uygulamanın CSS kodu neredeyse aynıdır, ancak kodun konumu farklıdır.
Yapıları hemen hemen aynıdır, tek fark React'in üç CSS dosyasına sahip olması, ancak Vue'nun olmamasıdır. Bunun nedeni, React bileşenlerinin stili kaydetmek için eklenmiş bir dosyaya ihtiyaç duymasıdır ve Vue, stili bileşen dosyasında bildirmek için include yöntemini kullanır.
Teorik olarak, tüm sayfanın stilini kaydetmek için eski style.css dosyasını kullanabilirsiniz, bu tamamen size bağlıdır. Her neyse, .vue dosyasındaki CSS kodunun neye benzediğini gösterelim:
Stil konularını okuduktan sonra şimdi diğer ayrıntılara geçelim!
Veriler nasıl değiştirilir?
"Veriyi değiştir" dediğimizde, aslında kaydedilen verileri değiştirmeyi kastediyoruz. Örneğin, bir kişinin adını John'dan Mark'a değiştirmek istiyorsak, "verileri değiştirmemiz" gerekir. Bu, React ve Vue arasındaki temel farklardan biridir. React bir durum nesnesi oluştururken Vue bir veri nesnesi oluşturdu ve veri nesnesini özgürce güncelleyebiliyoruz. Durum nesnesini güncellemek için daha önemsiz işlerin yapılması gerekiyor. Aşağıda, React'in durum nesnesi ile Vue'nun veri nesnesi arasında bir karşılaştırma yer almaktadır:
React'in durum nesnesi:
Vue'nun veri nesneleri:
Şekilden de görebileceğiniz gibi, aktardığımız şey aynı verilerdir, ancak bunlar farklı şekilde işaretlenmiştir. Ancak bu verileri nasıl değiştirdikleri konusunda çok farklılar.
Bir veri öğesi adımız olduğunu varsayalım: "Sunil".
Vue'da buna atıfta bulunmak için this.name kullanıyoruz. Ayrıca bunu this.name = 'John' ile güncelleyebiliriz, bu da adı John olarak değiştirecektir.
React'te buna this.state.name ile atıfta bulunuyoruz. Temel fark, bunu this.state.name = 'John' ile güncelleyemeyeceğimizdir çünkü React buna bir kısıtlama getirir. React'te, verileri güncellemek için this.setState ({name: 'John'}) kullanmamız gerekir.
Verilerin nasıl değiştirileceğini anladıktan sonra, yapılacaklar uygulamasına yeni öğelerin nasıl ekleneceğini inceleyerek diğer ayrıntılara dalalım.
Yeni bir yapılacaklar listesi nasıl oluşturulur?
Tepki:
createNewToDoItem = = > {this.setState (({list, yapılacak iş}) = > ({list: , yapılacak: ''}));};Vue:
createNewToDoItem {this.list.push ({'todo': this.todo}); this.todo = '';}React bunu nasıl yapıyor?
React'te, girdi değer adında bir özelliğe sahiptir. Değeri, iki yönlü bağlamaların oluşturulmasıyla ilgili çeşitli işlevler aracılığıyla otomatik olarak güncelleriz. React, onChange işlevini girişe ekleyerek iki yönlü bağlamayı işler.
< girdi türü = "metin" değer = {this.state.todo} onChange = {this.handleInput} / >Girişin değeri her değiştiğinde, handleInput işlevi yürütülür. Bu fonksiyon, durum nesnesindeki yapılacaklar alanının değerini girdideki değerle değiştirecektir. Bu işlev şuna benzer:
handleInput = e = > {this.setState ({todo: e.target.value});};Şimdi, kullanıcı sayfadaki + düğmesine her bastığında, createNewToDoItem this.setState 'i çağıracak ve bir işlevi iletecektir. Bu işlevin iki parametresi vardır, ilki durum nesnelerinin liste dizisi ve ikincisi todo (handleInput işlevi tarafından güncellenir). Daha sonra işlev, önceki tüm listeyi içeren yeni bir nesne döndürür ve ardından listenin sonuna yapılacaklar ekler.
Son olarak, todo'yu boş bir dizeye ayarladık ve aynı zamanda input'taki değeri otomatik olarak güncelleyecektir.
Vue bunu nasıl yapıyor?
Vue'da girdi, v-model adında bir niteliğe sahiptir. İki yönlü ciltleme elde etmek için kullanabiliriz.
< input type = "text" v-model = "yapılacak işler" / >v-model, girdiyi veri nesnesinin bir anahtarına toDoItem bağlar. Sayfayı yüklerken, toDoItem'i todo: gibi boş bir dizeye ayarladık. Yapılacaklar boş değilse, örneğin yapılacaklar: 'buraya biraz metin ekleyin', o zaman girdi bu dizeyi gösterecektir. Girişe girdiğimiz herhangi bir metin yapılacak. Bu aslında iki yönlü bağlamadır (girdi, veri nesnelerini güncelleyebilir ve veri nesneleri de girdiyi güncelleyebilir).
Bu nedenle, önceki createNewToDoItem kod bloğuna dönüp baktığımızda, todo'nun içeriğini liste dizisine koyarız ve sonra todo'yu boş bir dizeye güncelleriz.
Yapılacaklar nasıl silinir?
Tepki:
deleteItem = indexToDelete = > {this.setState (({list}) = > ({list: list.filter ((toDo, index) = > index! == indexToDelete)}));};React bunu nasıl yapıyor?
DeleteItem işlevi ToDo.js içinde olmasına rağmen, yine de ToDoItem.js'de deleteItem işlevini kullanarak buna başvurabilirim.
< ToDoItem deleteItem = {this.deleteItem.bind (this, key)} / >Bu, alt bileşenlerin geçirilen işleve erişmesine izin verir. Bunu ve parametre anahtarını da bağlarız ve geçirilen işlevin hangi Yapılacak Öğeyi sileceğini belirlemek için anahtarı kullanması gerekir. ToDoItem bileşeninin içinde aşağıdakileri yapıyoruz:
< div className = ToDoItem-Delete onClick = {this.props.deleteItem} > - < / div >Üst bileşendeki işleve başvurmak için this.props.deleteItem kullanıyorum.
Vue:
bu. $ on ('sil', (etkinlik) = > {this.list = this.list.filter (öğe = > item.todo! == event)})Vue bunu nasıl yapıyor?
Vue'nun yaklaşımı biraz farklı, temelde üç şey yapıyoruz.
Öncelikle, eleman üzerinde bir fonksiyon çağırmamız gerekiyor:
< div class = ToDoItem-Delete @ click = deleteItem (todo) > - < / div >Ardından, aşağıda gösterildiği gibi, alt bileşenin (bu durumda ToDoItem.vue) içinde bir yöntem olarak bir emit işlevi oluşturmalıyız:
deleteItem (yapılacak iş) {this. $ parent. $ emit ('sil', yapılacak)}Daha sonra ana işlevimiz, this. $ On ('delete') olay dinleyicisi, çağrıldığında filtre işlevini tetikleyecektir.
Basitçe söylemek gerekirse, React'teki alt bileşen this.props aracılığıyla üst işleve erişebilirken, Vue'de olaylar alt bileşenden üst bileşene gönderilmeli ve ardından ana bileşenin bu olayları dinlemesi ve çağrıldığında işlevi çalıştırması gerekir. .
Burada Vue örneğinde, $ emit kısmının içeriğini de aşağıda gösterildiği gibi @ tıklama dinleyicisine doğrudan yazabileceğimi belirtmek gerekir:
< div class = ToDoItem-Delete @ click = this. $ parent. $ emit ('sil', yapılacak) > - < / div >Bu, bazı kodları azaltabilir, ancak kişisel tercihlere de bağlıdır.
Olay dinleyicisine nasıl geçilir?
Tepki:
Basit olaylar (tıklama olayları gibi) için olay dinleyicisi basittir. Yeni bir yapılacaklar öğesi eklemek üzere bir düğme için nasıl tıklama etkinliği oluşturduğumuza bir örnek:
< div className = ToDo-Add onClick = {this.createNewToDoItem} > + < / div >Çok basit, satır içi onClick olaylarını işlemek için saf JS kullanmaya çok benziyor. Vue'da olay dinleyicilerini kurmak daha uzun sürer. Giriş etiketinin, aşağıda gösterildiği gibi onKeyPress olayını işlemesi gerekir:
< giriş türü = text onKeyPress = {this.handleKeyPress} / >Kullanıcı 'enter' tuşuna bastığı sürece, bu işlev aşağıda gösterildiği gibi createNewToDoItem işlevini tetikleyecektir:
handleKeyPress = (e) = > {if (e.key === "Girin") {this.createNewToDoItem;}};Vue:
Vue'da bu işlevi uygulamak çok basittir. Sadece @ sembolünü ve olay dinleyicisinin türünü kullanmamız gerekiyor. Örneğin, bir tıklama olay dinleyicisi eklemek için şunu yazabiliriz:
< div class = ToDo-Add @ click = createNewToDoItem > + < / div >Not: @click aslında v-on: click için bir kısaltmadır. Vue'da birçok şeyi olay dinleyicilerine bağlayabiliriz.Örneğin, .once olay dinleyicilerin birden çok kez tetiklenmesini önleyebilir. Ayrıca, tuş basışlarını işleyen belirli olaylar için dinleyiciler yazarken de bazı kısayolları kullanabilirsiniz. React'te yapılacaklar ekle düğmesi için bir olay dinleyicisi oluşturmanın daha uzun sürdüğünü buldum. Vue'da şöyle yazabilirim:
< giriş türü = metin v-on: keyup.enter = createNewToDoItem / >Veriler alt bileşenlere nasıl aktarılır?
Tepki:
React'te, bir alt bileşen oluştururken, ona props aktarıyoruz.
< ToDoItem key = {key} item = {todo} / >ToDoItem bileşenine todo props'ı geçtik. Bundan böyle, alt bileşendeki this.props aracılığıyla bunlara başvurabiliriz. Bu nedenle, item.todo'ya erişmek için yalnızca this.props.todo'yu çağırmamız gerekir.
Vue:
Vue'da, bir alt bileşen oluştururken, ona props aktarıyoruz.
< ToDoItem v-for = "this.list içindeki öğe": todo = "item.todo": key = "list.indexOf (öğe)": id = "list.indexOf (öğe)" > < / ToDoItem >Ardından, bunları props: gibi alt bileşenin props dizisine ekleriz. Daha sonra alt bileşenlerde isimleriyle bunlara başvurabilirsiniz, 'id' ve 'yapılacak' girin.
Veriler ana bileşene nasıl geri gönderilir?
Tepki:
Alt bileşeni çağırırken, işlevi alt bileşene bir pervane olarak iletiriz ve ardından alt bileşenin işlevini herhangi bir şekilde çağırırız, bu da üst bileşendeki işlevi tetikler. "Yapılacaklar nasıl silinir" bölümünde tüm sürecin bir örneğini görebiliriz.
Vue:
Çocuk bileşenimizde, ana işleve bir değer geri göndermek için yalnızca bir işlev yazmamız gerekir. Üst bileşende, bu değeri izlemek için bir işlev yazdık ve ardından işlev çağrısını tetikledik. "Yapılacaklar nasıl silinir" bölümünde tüm sürecin bir örneğini görebiliriz.
Örnek kod bağlantısı:
Vue: https://github.com/sunil-sandhu/vue-todo
Tepki: https://github.com/sunil-sandhu/react-todo
Orijinal İngilizce
https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd
Bugünün Tavsiyesi
Okumak için aşağıdaki resme tıklayın
SQL'i hızlandırmak için 2 Unix komutu nasıl kullanılır
Facebook, Oracle ve JD.com gibi önde gelen şirketlerin ileri düzey orta ve üst düzey programcılarına baktığınızda, neredeyse başka ne yapıyorsunuz? Birçok programcının yaptığı iş yalnızca işlevlerin gerçekleştirilmesidir ve "Double Eleven" ve "June 18" gibi yüksek eşzamanlılık zorluklarıyla karşılaşmayacaktır. O halde büyük bir internet şirketinde olmadan şansınız yok mu? Tabii ki hayır, bu büyük ölçekli projelerin tasarım ve optimizasyon deneyimini BATJ Daniel'in bazı teknoloji paylaşımlarıyla öğrenebiliriz.
Aşağıdaki QR kodunu tanımlayın veya Orijinal metni okuyun Daha fazla kilidi açmak için!
