VueJS - Genel Bakış

VueJSetkileşimli web arayüzleri geliştirmek için kullanılan açık kaynaklı bir aşamalı JavaScript çerçevesidir. Web geliştirmeyi basitleştirmek için kullanılan ünlü çerçevelerden biridir. VueJS, görünüm katmanına odaklanır. Herhangi bir sorun olmadan ön uç geliştirme için büyük projelere kolayca entegre edilebilir.

VueJS kurulumuna başlamak çok kolaydır. Herhangi bir geliştirici, etkileşimli web arayüzlerini zaman içinde kolayca anlayabilir ve oluşturabilir. VueJS, Google'ın eski bir çalışanı olan Evan You tarafından oluşturulmuştur. VueJS'nin ilk sürümü Şubat 2014'te yayınlandı. Yakın zamanda GitHub'da 64.828 yıldıza ulaştı ve bu onu çok popüler hale getirdi.

Özellikleri

Aşağıda, VueJS ile kullanılabilen özellikler bulunmaktadır.

Sanal DOM

VueJS, React, Ember vb. Gibi diğer çerçeveler tarafından da kullanılan sanal DOM'u kullanır. Değişiklikler DOM'a yapılmaz, bunun yerine JavaScript veri yapıları biçiminde bulunan DOM'un bir kopyası oluşturulur. . Herhangi bir değişiklik yapılacağı zaman, JavaScript veri yapılarında yapılır ve ikincisi, orijinal veri yapısıyla karşılaştırılır. Son değişiklikler daha sonra kullanıcının değiştiğini göreceği gerçek DOM'a güncellenir. Bu optimizasyon açısından iyidir, daha ucuzdur ve değişiklikler daha hızlı yapılabilir.

Bağlanma verileri

Veri bağlama özelliği, HTML niteliklerinin değiştirilmesine veya atanmasına, stili değiştirmeye, adı verilen bağlama yönergesi yardımıyla sınıflar atamaya yardımcı olur. v-bind VueJS ile mevcuttur.

Bileşenler

Bileşenler, HTML'de yeniden kullanılabilen özel öğeler oluşturmaya yardımcı olan VueJS'nin önemli özelliklerinden biridir.

Olay işleme

v-on VueJS'deki olayları dinlemek için DOM öğelerine eklenen özelliktir.

Animasyon / Geçiş

VueJS, HTML öğelerine DOM'a eklendiğinde / güncellendiğinde veya DOM'dan kaldırıldığında geçiş uygulamak için çeşitli yollar sağlar. VueJS, geçiş efekti için öğenin etrafına sarılması gereken yerleşik bir geçiş bileşenine sahiptir. Üçüncü taraf animasyon kitaplıklarını kolayca ekleyebilir ve ayrıca arayüze daha fazla etkileşim ekleyebiliriz.

Hesaplanan Özellikler

Bu, VueJS'nin önemli özelliklerinden biridir. UI elemanlarında yapılan değişikliklerin dinlenmesine yardımcı olur ve gerekli hesaplamaları yapar. Bunun için ek bir kodlamaya gerek yoktur.

Şablonlar

VueJS, DOM'u Vue örnek verileriyle bağlayan HTML tabanlı şablonlar sağlar. Vue, şablonları sanal DOM Render işlevlerinde derler. Render işlevlerinin şablonunu kullanabiliriz ve bunu yapmak için şablonu render işlevi ile değiştirmemiz gerekir.

Direktifler

VueJS, ön uçta çeşitli eylemleri gerçekleştirmek için kullanılan v-if, v-else, v-show, v-on, v-bind ve v-model gibi yerleşik yönergelere sahiptir.

Gözlemciler

Gözlemciler değişen verilere uygulanır. Örneğin, girdi öğeleri oluşturun. Burada herhangi bir ek etkinlik eklememize gerek yoktur. Watcher, kodu basit ve hızlı hale getirerek herhangi bir veri değişikliğini ele alır.

Yönlendirme

Sayfalar arasında gezinme vue-yönlendirici yardımı ile gerçekleştirilir.

Hafif

VueJS betiği çok hafif ve performansı da çok hızlı.

Vue-CLI

VueJS, vue-cli komut satırı arayüzü kullanılarak komut satırına kurulabilir. Projeyi vue-cli kullanarak kolayca oluşturmaya ve derlemeye yardımcı olur.

Diğer Çerçevelerle Karşılaştırma

Şimdi VueJS'yi React, Angular, Ember, Knockout ve Polymer gibi diğer çerçevelerle karşılaştıralım.

VueJS v / s Tepki

Virtual DOM

Sanal DOM, DOM ağacının sanal bir temsilidir. Sanal DOM ile, gerçek DOM ile aynı olan bir JavaScript nesnesi oluşturulur. DOM'de her değişiklik yapılması gerektiğinde, yeni bir JavaScript nesnesi oluşturulur ve değişiklikler yapılır. Daha sonra, hem JavaScript nesneleri karşılaştırılır ve son değişiklikler gerçek DOM'da güncellenir.

VueJS ve React'in her ikisi de sanal DOM kullanır, bu da onu daha hızlı yapar.

Template v/s JSX

VueJS, html, js ve css'yi ayrı ayrı kullanır. Yeni başlayanlar için VueJS stilini anlamak ve benimsemek çok kolaydır. VueJS için şablon tabanlı yaklaşım çok kolaydır.

React, jsx yaklaşımını kullanır. ReactJS için her şey JavaScript'tir. HTML ve CSS, JavaScript'in bir parçasıdır.

Installation Tools

React kullanımları create react app ve VueJS, vue-cli /CDN/npm. Her ikisinin de kullanımı çok kolaydır ve proje tüm temel gereksinimlerle oluşturulmuştur. React derleme için web paketine ihtiyaç duyarken, VueJS buna ihtiyaç duymaz. Cdn kitaplığını kullanarak jsfiddle veya codepen'in herhangi bir yerinde VueJS kodlamasıyla başlayabiliriz.

Popularity

React, VueJS'den daha popüler. React ile iş fırsatı VueJS'den daha fazlasıdır. React, yani Facebook'un arkasında onu daha popüler yapan büyük bir isim var. React, JavaScript'in temel kavramını kullandığından, JavaScript'in en iyi uygulamasını kullanır. React ile çalışan biri kesinlikle tüm JavaScript konseptlerinde çok iyi olacaktır.

VueJS, gelişen bir çerçevedir. Şu anda, VueJS ile iş fırsatları React'e kıyasla daha az. Bir ankete göre, birçok kişi VueJS'e adapte oluyor ve bu da onu React ve Angular'a kıyasla daha popüler hale getirebilir. VueJS'nin farklı özellikleri üzerinde çalışan iyi bir topluluk var. Vue yönlendirici, düzenli güncellemelerle bu topluluk tarafından korunur.

VueJS, Angular ve React'ten iyi parçaları aldı ve güçlü bir kitaplık oluşturdu. VueJS, hafif kütüphanesi nedeniyle React / Angular'a kıyasla çok daha hızlıdır.

VueJS v / s Açısal

Similarities

VueJS, Angular ile pek çok benzerliğe sahiptir. V-if, v-for gibi yönergeler, Angular'daki ngIf, ngFor'a neredeyse benzer. Her ikisinin de proje kurulumu ve onu inşa etmek için bir komut satırı arayüzü vardır. VueJS, Vue-cli kullanır ve Angular, açısal-cli kullanır. Her ikisi de iki yönlü veri bağlama, sunucu tarafı oluşturma vb. Sunar.

Complexity

Vuejs öğrenmek ve başlamak çok kolaydır. Daha önce tartışıldığı gibi, yeni başlayanlar VueJS'nin CDN kitaplığını alabilir ve codepen ve jsfiddle'a başlayabilir.

Angular için, kurulum için bir dizi adımdan geçmemiz gerekiyor ve yeni başlayanlar için Angular'ı kullanmaya başlamak biraz zor. Temel JavaScript geçmişinden gelen kişiler için zor olan kodlama için TypeScript kullanır. Ancak Java ve C # arka planına sahip kullanıcılar için öğrenmesi daha kolaydır.

Performance

Performansa karar vermek kullanıcılara bağlıdır. VueJS dosya boyutu Angular'dan çok daha hafiftir. Aşağıdaki bağlantıda çerçeve performansının bir karşılaştırması sağlanmaktadırhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

Şu anda Angular, VueJS'den daha popüler. Birçok kuruluş Angular'ı çok popüler kılan kullanıyor. Angular'da deneyimli adaylar için iş fırsatları da daha fazladır. Bununla birlikte, VueJS piyasada yerini alıyor ve Angular ve React için iyi bir rakip olarak kabul edilebilir.

Dependencies

Angular, birçok yerleşik özellik sağlar. Gerekli modülleri içe aktarmalı ve buna başlamalıyız, örneğin, @ angular / animations, @ angular / form.

VueJS, Angular gibi tüm yerleşik özelliklere sahip değildir ve üzerinde çalışmak için üçüncü taraf kitaplıklara bağlı olması gerekir.

Flexibility

VueJS, başka herhangi bir büyük projeyle herhangi bir sorun olmadan kolayca birleştirilebilir. Angular, mevcut başka bir projeyle çalışmaya başlamak o kadar kolay olmayacak.

Backward Compatibility

AngularJS, Angular2 ve şimdi de Angular4 vardı. AngularJS ve Angular2 büyük farklara sahiptir. AngularJS'de geliştirilen proje uygulaması temel farklılıklar nedeniyle Angular2'ye dönüştürülemiyor.

VueJS'nin en son sürümü 2.0'dır ve geriye dönük uyumlulukla iyidir. Anlaşılması çok kolay olan iyi belgeler sağlar.

Typescript

Angular, kodlaması için TypeScript kullanır. Angular'ı kullanmaya başlamak için kullanıcıların Typescript bilgisine sahip olmaları gerekir. Ancak, cdn kitaplığını kullanarak jsfiddle veya codepen'in herhangi bir yerinde VueJS kodlamasıyla başlayabiliriz. Başlaması çok kolay olan standart JavaScript ile çalışabiliriz.

VueJS v / s Kor

Similarities

Ember, Ember komut satırı aracı, yani Ember projeleri için kolay kurulum ve derleme için ember-cli sağlar.

VueJS ayrıca projeleri başlatmak ve oluşturmak için bir komut satırı aracı vue-cli'ye sahiptir.

Her ikisinin de yönlendirici, şablon ve bileşenler gibi özellikleri vardır, bu da onları UI çerçevesi olarak çok zengin yapar.

Performance

VueJS, Ember ile karşılaştırıldığında daha iyi performansa sahiptir. Ember, sanal DOM kullanan VueJS ve React ile benzer bir kavram olan yeniden oluşturma performansını iyileştirmek amacıyla bir parıltılı oluşturma motoru ekledi. Ancak VueJS, Ember ile karşılaştırıldığında daha iyi bir performansa sahip.

VueJS v / s Nakavt

Nakavt, iyi bir tarayıcı desteği sağlar. IE'nin alt sürümünde desteklenirken VueJS, IE8 ve altında desteklenmez. Nakavt gelişimi zamanla yavaşladı. Son zamanlarda bunun için pek popülerlik yok.

Öte yandan, VueJS düzenli güncellemeler sağlayan Vue ekibiyle popülerlik kazanmaya başladı.

VueJS v / s Polimer

Polimer kütüphanesi Google tarafından geliştirilmiştir. Google I / O, Google Earth, Google Play Müzik gibi birçok Google projesinde kullanılır. VueJS'ye benzer veri bağlama ve hesaplanmış özellikler sunar.

Polimer özel öğe tanımı, düz JavaScript / CSS, öğe özellikleri, yaşam döngüsü geri çağırmaları ve JavaScript yöntemlerinden oluşur. Buna karşılık, VueJS, JavaScript / html ve CSS'yi kolayca kullanmaya izin verir.

Polymer, web bileşeni özelliklerini kullanır ve tarayıcılar için bu özellikleri desteklemeyen çoklu dolgular gerektirir. VueJS'nin bu tür bağımlılıkları yoktur ve IE9 + 'daki tüm tarayıcılarda sorunsuz çalışır.