VueJS - Übersicht
VueJSist ein Open-Source-Framework für progressives JavaScript, das zur Entwicklung interaktiver Webschnittstellen verwendet wird. Es ist eines der bekanntesten Frameworks zur Vereinfachung der Webentwicklung. VueJS konzentriert sich auf die Ansichtsebene. Es kann problemlos in große Projekte für die Front-End-Entwicklung integriert werden.
Die Installation für VueJS ist sehr einfach zu beginnen. Jeder Entwickler kann interaktive Webschnittstellen in kürzester Zeit leicht verstehen und erstellen. VueJS wurde von Evan You, einem ehemaligen Mitarbeiter von Google, erstellt. Die erste Version von VueJS wurde im Februar 2014 veröffentlicht. Sie wurde kürzlich auf GitHub auf 64.828 Sterne getaktet, was sie sehr beliebt macht.
Eigenschaften
Im Folgenden sind die mit VueJS verfügbaren Funktionen aufgeführt.
Virtuelles DOM
VueJS verwendet virtuelles DOM, das auch von anderen Frameworks wie React, Ember usw. verwendet wird. Die Änderungen werden nicht am DOM vorgenommen, sondern es wird eine Replik des DOM erstellt, die in Form von JavaScript-Datenstrukturen vorliegt . Wenn Änderungen vorgenommen werden sollen, werden diese an den JavaScript-Datenstrukturen vorgenommen und diese werden mit der ursprünglichen Datenstruktur verglichen. Die endgültigen Änderungen werden dann auf das reale DOM aktualisiert, das der Benutzer ändern wird. Dies ist gut in Bezug auf die Optimierung, es ist kostengünstiger und die Änderungen können schneller vorgenommen werden.
Datenbindung
Die Datenbindungsfunktion hilft beim Bearbeiten oder Zuweisen von Werten zu HTML-Attributen, beim Ändern des Stils und beim Zuweisen von Klassen mithilfe der aufgerufenen Bindungsanweisung v-bind erhältlich mit VueJS.
Komponenten
Komponenten sind eine der wichtigen Funktionen von VueJS, mit deren Hilfe benutzerdefinierte Elemente erstellt werden können, die in HTML wiederverwendet werden können.
Handhabung des Events
v-on ist das Attribut, das den DOM-Elementen hinzugefügt wird, um die Ereignisse in VueJS abzuhören.
Animation / Übergang
VueJS bietet verschiedene Möglichkeiten, den Übergang auf HTML-Elemente anzuwenden, wenn diese zum DOM hinzugefügt / aktualisiert oder aus dem DOM entfernt werden. VueJS verfügt über eine integrierte Übergangskomponente, die für den Übergangseffekt um das Element gewickelt werden muss. Wir können problemlos Animationsbibliotheken von Drittanbietern hinzufügen und der Benutzeroberfläche mehr Interaktivität hinzufügen.
Berechnete Eigenschaften
Dies ist eines der wichtigsten Merkmale von VueJS. Es hilft, die an den UI-Elementen vorgenommenen Änderungen zu hören und die erforderlichen Berechnungen durchzuführen. Hierfür ist keine zusätzliche Codierung erforderlich.
Vorlagen
VueJS bietet HTML-basierte Vorlagen, die das DOM mit den Vue-Instanzdaten verbinden. Vue kompiliert die Vorlagen in virtuelle DOM-Renderfunktionen. Wir können die Vorlage der Renderfunktionen verwenden und müssen dazu die Vorlage durch die Renderfunktion ersetzen.
Richtlinien
VueJS verfügt über integrierte Anweisungen wie v-if, v-else, v-show, v-on, v-bind und v-model, mit denen verschiedene Aktionen im Frontend ausgeführt werden.
Beobachter
Beobachter werden auf Daten angewendet, die sich ändern. Bilden Sie beispielsweise Eingabeelemente. Hier müssen wir keine zusätzlichen Ereignisse hinzufügen. Watcher kümmert sich um alle Datenänderungen, wodurch der Code einfach und schnell wird.
Routing
Die Navigation zwischen den Seiten erfolgt mit Hilfe des Vue-Routers.
Leicht
VueJS-Skript ist sehr leicht und die Leistung ist auch sehr schnell.
Vue-CLI
VueJS kann über die Befehlszeilenschnittstelle vue-cli in der Befehlszeile installiert werden. Es hilft, das Projekt einfach mit vue-cli zu erstellen und zu kompilieren.
Vergleich mit anderen Frameworks
Vergleichen wir nun VueJS mit anderen Frameworks wie React, Angular, Ember, Knockout und Polymer.
VueJS v / s Reagieren
Virtual DOM
Virtuelles DOM ist eine virtuelle Darstellung des DOM-Baums. Mit dem virtuellen DOM wird ein JavaScript-Objekt erstellt, das mit dem realen DOM identisch ist. Jedes Mal, wenn eine Änderung am DOM vorgenommen werden muss, wird ein neues JavaScript-Objekt erstellt und die Änderungen werden vorgenommen. Später werden beide JavaScript-Objekte verglichen und die endgültigen Änderungen im realen DOM aktualisiert.
VueJS und React verwenden beide virtuelles DOM, was es schneller macht.
Template v/s JSX
VueJS verwendet HTML, JS und CSS separat. Für Anfänger ist es sehr einfach, den VueJS-Stil zu verstehen und zu übernehmen. Der vorlagenbasierte Ansatz für VueJS ist sehr einfach.
React verwendet den jsx-Ansatz. Alles ist JavaScript für ReactJS. HTML und CSS sind alle Teil von JavaScript.
Installation Tools
Reagieren verwendet create react app und VueJS verwendet vue-cli /CDN/npm. Beide sind sehr einfach zu bedienen und das Projekt ist mit allen grundlegenden Anforderungen eingerichtet. React benötigt ein Webpack für den Build, VueJS dagegen nicht. Wir können mit der VueJS-Codierung überall in jsfiddle oder codepen mithilfe der cdn-Bibliothek beginnen.
Popularity
React ist beliebter als VueJS. Die Arbeitsmöglichkeit bei React ist mehr als VueJS. Hinter React steckt ein großer Name, dh Facebook, der es populärer macht. Da React das Kernkonzept von JavaScript verwendet, verwendet es die Best Practice von JavaScript. Wer mit React arbeitet, kann mit allen JavaScript-Konzepten auf jeden Fall sehr gut umgehen.
VueJS ist ein sich entwickelndes Framework. Derzeit sind die Stellenangebote bei VueJS im Vergleich zu React geringer. Laut einer Umfrage passen sich viele Menschen an VueJS an, was es im Vergleich zu React und Angular populärer machen kann. Es gibt eine gute Community, die an den verschiedenen Funktionen von VueJS arbeitet. Der Vue-Router wird von dieser Community mit regelmäßigen Updates gewartet.
VueJS hat die guten Teile von Angular and React übernommen und eine leistungsstarke Bibliothek aufgebaut. VueJS ist aufgrund seiner leichten Bibliothek im Vergleich zu React / Angular viel schneller.
VueJS v / s Angular
Similarities
VueJS hat viele Ähnlichkeiten mit Angular. Anweisungen wie v-if, v-for ähneln fast ngIf, ngFor von Angular. Beide haben eine Befehlszeilenschnittstelle für die Projektinstallation und zum Erstellen. VueJS verwendet Vue-cli und Angular verwendet Angular-cli. Beide bieten bidirektionale Datenbindung, serverseitiges Rendern usw.
Complexity
Vuejs ist sehr einfach zu lernen und zu beginnen. Wie bereits erwähnt, kann ein Anfänger die CDN-Bibliothek von VueJS nutzen und mit Codepen und Jsfiddle beginnen.
Für Angular müssen wir eine Reihe von Installationsschritten durchlaufen, und für Anfänger ist es wenig schwierig, mit Angular zu beginnen. Es verwendet TypeScript für die Codierung, was für Personen mit JavaScript-Kernhintergrund schwierig ist. Für Benutzer mit Java- und C # -Hintergrund ist es jedoch einfacher zu lernen.
Performance
Die Entscheidung über die Leistung liegt bei den Benutzern. Die VueJS-Dateigröße ist viel leichter als Angular. Ein Vergleich der Framework-Leistung finden Sie unter folgendem Linkhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
Popularity
Derzeit ist Angular beliebter als VueJS. Viele Organisationen verwenden Angular, was es sehr beliebt macht. Stellenangebote sind auch eher für Kandidaten mit Erfahrung in Angular. VueJS nimmt jedoch den Platz auf dem Markt ein und kann als guter Konkurrent für Angular and React angesehen werden.
Dependencies
Angular bietet viele integrierte Funktionen. Wir müssen die erforderlichen Module importieren und damit beginnen, zum Beispiel @ angle / animations, @ angle / form.
VueJS verfügt nicht über alle integrierten Funktionen wie Angular und muss auf Bibliotheken von Drittanbietern angewiesen sein, um daran arbeiten zu können.
Flexibility
VueJS kann problemlos mit jedem anderen großen Projekt zusammengeführt werden. Angular wird nicht so einfach sein, mit einem anderen vorhandenen Projekt zu arbeiten.
Backward Compatibility
Wir hatten AngularJS, Angular2 und jetzt Angular4. AngularJS und Angular2 unterscheiden sich erheblich. In AngularJS entwickelte Projektanwendungen können aufgrund der Kernunterschiede nicht in Angular2 konvertiert werden.
Die neueste Version von VueJS ist 2.0 und bietet gute Abwärtskompatibilität. Es bietet eine gute Dokumentation, die sehr einfach zu verstehen ist.
Typescript
Angular verwendet TypeScript für die Codierung. Benutzer müssen über Kenntnisse in Typescript verfügen, um mit Angular beginnen zu können. Wir können jedoch mit der VueJS-Codierung an einer beliebigen Stelle in jsfiddle oder codepen mithilfe der cdn-Bibliothek beginnen. Wir können mit Standard-JavaScript arbeiten, was sehr einfach zu beginnen ist.
VueJS v / s Ember
Similarities
Ember bietet das Ember-Befehlszeilentool, dh ember-cli, für die einfache Installation und Kompilierung von Ember-Projekten.
VueJS verfügt außerdem über ein Befehlszeilentool vue-cli zum Starten und Erstellen von Projekten.
Beide verfügen über Funktionen wie Router, Vorlage und Komponenten, wodurch sie als UI-Framework sehr umfangreich sind.
Performance
VueJS hat im Vergleich zu Ember eine bessere Leistung. Ember hat eine Glimmer-Rendering-Engine hinzugefügt, um die Leistung beim erneuten Rendern zu verbessern. Dies ist ein ähnliches Konzept wie bei VueJS und React mit virtuellem DOM. VueJS hat jedoch im Vergleich zu Ember eine bessere Leistung.
VueJS v / s Knockout
Knockout bietet eine gute Browserunterstützung. Es wird in der unteren Version des IE unterstützt, während VueJS in IE8 und darunter nicht unterstützt wird. Die Knockout-Entwicklung hat sich im Laufe der Zeit verlangsamt. Es gibt in letzter Zeit nicht viel Popularität dafür.
Auf der anderen Seite hat VueJS mit dem Vue-Team, das regelmäßig Updates bereitstellt, an Popularität gewonnen.
VueJS v / s Polymer
Die Polymerbibliothek wurde von Google entwickelt. Es wird in vielen Google-Projekten wie Google I / O, Google Earth, Google Play Music usw. verwendet. Es bietet Datenbindung und berechnete Eigenschaften ähnlich wie VueJS.
Die benutzerdefinierte Polymerelementdefinition umfasst einfaches JavaScript / CSS, Elementeigenschaften, Lebenszyklusrückrufe und JavaScript-Methoden. Im Vergleich dazu ermöglicht VueJS die einfache Verwendung von JavaScript / HTML und CSS.
Polymer verwendet Webkomponentenfunktionen und benötigt Polyfills für Browser, die diese Funktionen nicht unterstützen. VueJS hat keine solchen Abhängigkeiten und funktioniert in allen Browsern von IE9 + einwandfrei.