Vergleich zwischen Angular React und Vue

Die Front-End-Technologie hat sich in den letzten Jahren rasant weiterentwickelt und kann in vier Aspekte unterteilt werden:

1. Entwicklung der Sprachtechnologie , hauptsächlich ES6 und 7, Coffeescript, Typoskript usw. ; 2.
Entwicklungsframework, wie Angular, React, Vue.js, Angular2 usw.; 3.
Umfangreiche Entwicklungstools und Front-End-Engineering , wie Grunt, Gulp, Webpack, npm, eslint, Mocha und andere Technologien; 4.
Erweiterung des Front-End-Entwicklungsbereichs, wie NodeJS, Express, Koa, Meteor, GraphQL auf der Serverseite; mobiles und plattformübergreifendes PhoneGap, ionic, ReactNative, Weex; WebGL (Three.js, etc.) im Bereich Computergrafik und 3D-Modellierung; Analyse; einschließlich weiterer neuer Funktionen und Schnittstellen, die Browser ständig öffnen, wie SVG, Canvas, Bluetooth, Batterie, lokaler Speicher, Service Worker, Houdini und andere neue API-Funktionen sowie zugrunde liegende Optimierungstechnologien wie WASM; 🎜>Was Entwicklungs-Frameworks angeht, haben Angular (1&2), React und Vue derzeit den Mainstream-Status inne und werden dies auch noch für einen relativ langen Zeitraum bleiben, daher hier ein Vergleich dieser drei Technologien zur Erleichterung zukünftige Technologieauswahl.

1 Datenfluss

Datenbindung

Angular verwendet eine bidirektionale Bindung, das heißt: Schnittstellenoperationen können in Echtzeit in den Daten widergespiegelt werden, und Datenänderungen können erfolgen in Echtzeit in der Benutzeroberfläche angezeigt.

Implementierungsprinzip:

Dirty Value Check wird in Variablen verwendet. Ember.js basiert beispielsweise auf dem Beobachtungsmechanismus von Settern und Gettern, und die Funktion

$scope überwacht Änderungen in einer Variablen. Die Funktion verfügt über drei Parameter: „Was soll beobachtet werden“, „Was passiert, wenn es sich ändert“ und ob Sie eine Variable oder ein Objekt überwachen möchten.

Bei Verwendung des ng-Modells können Sie eine bidirektionale Datenbindung verwenden. $scope.$watch Verwenden Sie

(Ansicht zu Modell) und

(Modell zu Ansicht) und
$scope.$watch$scope.$apply, wenn Sie $scope.$digest aufrufen, wird nur ein Parameter übergeben, unabhängig vom Umfang. Wenn sich etwas ändert, Diese Funktion wird aufgerufen. In ng-model wird diese Funktion verwendet, um zu überprüfen, ob Modell und Ansicht synchronisiert sind. Andernfalls werden die Modelldaten mit dem neuen Wert aktualisiert.

$scope.$watchDrei wichtige Methoden der Zwei-Wege-Bindung:

$scope.$apply()

$scope.$digest()

$scope.$watch()

In der bidirektionalen Bindung von AngularJS gibt es zwei sehr wichtige Konzepte namens Dirty Check und Digest Loop, Dirty Check (Dirty Detection) wird verwendet, um den Bindungsbereich zu überprüfen des Objekts in , erstellen Sie beispielsweise ein Objekt in js und binden Sie das Objekt an den Bereich, sodass sich das Objekt in der Digest-Schleife befindet und die Schleife sie durch Durchlaufen dieser Objekte erkennt. Ob es sich ändert, Wenn ja, wird die entsprechende Verarbeitungsmethode aufgerufen, um eine bidirektionale Bindung zu erreichen

Vue unterstützt auch bidirektionale Bindung, standardmäßig ist die unidirektionale Bindung , Daten werden in einer Richtung von der übergeordneten Komponente zur untergeordneten Komponente weitergegeben. Verwenden Sie unidirektionale Bindung in großen Anwendungen, um den Datenfluss leicht verständlich zu machen .

Vor- und Nachteile der Dirty-Erkennung

Verglichen mit dem Getter/Setter-Beobachtungsmechanismus von ember.js und anderen Technologien (ausgezeichnet):
Getter/Setter Wird jedes Mal erkannt Wenn sich das DOM ändert, ändert sich die Struktur des DOM-Baums, was große Auswirkungen auf die Leistung hat. Angular verzögert den Batch-Vorgang auf eine Aktualisierung und die Leistung ist relativ gut.

Im Vergleich zu Vue (minderwertig):

Vue.js hat eine bessere Leistung und ist sehr, sehr einfach zu optimieren, da es keine Dirty Checking verwendet. Angular, wird immer langsamer, wenn mehr Beobachter vorhanden sind, da bei jeder Änderung des Umfangs alle Beobachter neu berechnet werden müssen . Außerdem kann der Digest-Zyklus mehrmals ausgeführt werden , wenn einige Beobachter ein weiteres Update auslösen. Angular-Benutzer greifen oft auf esoterische Techniken zurück, um das Problem der Dirty Check Loops zu lösen. Manchmal gibt es keine einfache Möglichkeit zur Optimierung, wenn es eine große Anzahl gibt Der Umfang des Beobachters. Vue.js hat dieses Problem überhaupt nicht, da es ein Beobachtungssystem verwendet, das auf Abhängigkeitsverfolgung und asynchronen Warteschlangenaktualisierungen basiert. Alle Datenänderungen werden unabhängig voneinander ausgelöst, sofern keine klaren Abhängigkeiten zwischen ihnen bestehen . Die einzige erforderliche Optimierung besteht darin, Track-by auf v-for zu verwenden.

React-One-Way-Datenfluss

Der MVVM-Fluss in Angular und Vue verwendet beide eine vorlagenähnliche Syntax, um die Bindungsbeziehung zwischen Schnittstellenstatus und Daten zu beschreiben, und konvertiert diese dann durch interne Konvertierung Wenn sich die Schnittstelle ändert, werden die entsprechenden Daten gemäß den konfigurierten Regeln aktualisiert, und dann wird der Schnittstellenstatus anhand der Daten gemäß den konfigurierten Regeln aktualisiert.

React befürwortet funktionale Programmierung und unidirektionalen Datenfluss: Bei gegebener ursprünglicher Schnittstelle (oder Daten) kann durch Anwenden einer Änderung ein anderer Zustand (Schnittstelle oder Daten) abgeleitet und erneuert werden.

Sowohl React als auch Vue können mit Redux zusammenarbeiten, um Zustandsdaten zu verwalten.

2 Ansichtsrendering

Angular1

Das Arbeitsprinzip von AngularJS ist: Die HTML-Vorlage wird vom Browser in DOM analysiert und die DOM-Struktur wird zur Eingabe des AngularJS-Compilers. AngularJS durchläuft die DOM-Vorlage, um entsprechende NG-Anweisungen zu generieren. Alle Anweisungen sind für die Festlegung der Datenbindung für die Ansicht (dh das ng-Modell in HTML) verantwortlich. Daher beginnt das NG-Framework erst zu funktionieren, nachdem das DOM geladen ist.

React

Reacts Rendering basiert auf Virtual DOM – einer Datenstruktur, die den Zustand des DOM-Baums im Speicher beschreibt. Wenn sich der Status ändert, rendert React das virtuelle DOM neu und patcht das reale DOM nach Vergleich und Berechnung.

Virtual DOM bietet eine funktionale Methode zur Beschreibung der Ansicht. Es wird nicht der Datenbeobachtungsmechanismus verwendet, also per Definition die Ansicht und Datensynchronisierung . Es eröffnet auch die Möglichkeit isomorpher Anwendungen in JavaScript.

Im Hinblick auf die Rendergeschwindigkeit des ersten Bildschirms extrem großer Datenmengen hat React bestimmte Vorteile, da der Rendering-Mechanismus von Vue mehr Arbeit zu erledigen hat startet und React unterstützt serverseitiges Rendering.

Reacts Virtuelles DOM muss ebenfalls optimiert werden . In komplexen Anwendungen können Sie wählen: 1. Manuell hinzufügen shouldComponentUpdate, um unnötiges erneutes Rendern von vdom zu vermeiden 2. Verwenden Sie so viel wie möglich pureRenderMixin für Komponenten und verwenden Sie dann Flux-Struktur + Immutable.js. Tatsächlich ist es nicht so einfach. Im Gegensatz dazu verwendet Vue Abhängigkeitsverfolgung und der Standardwert ist der Optimierungsstatus: löst so viele Aktualisierungen aus, wie die Daten verschoben werden, nicht mehr und nicht weniger .

React und Angular 2 verfügen beide über serverseitige Rendering- und native Rendering-Funktionen.

Vue.js verwendet kein virtuelles DOM, sondern echtes DOM als Vorlage und Daten sind an echte Knoten gebunden. Die Anwendungsumgebung von Vue.js muss DOM bereitstellen. Vue.js ist manchmal leistungsfähiger als React** und erfordert fast keine manuelle Optimierung.

3 Leistung und Optimierung

In Bezug auf die Leistung sollten diese Mainstream-Frameworks in der Lage sein, die Leistungsanforderungen der meisten gängigen Szenarien problemlos zu erfüllen. Der Unterschied liegt in der Optimierbarkeit und den Auswirkungen der Optimierung auf die Entwicklungserfahrung. Für Vue muss Track-by hinzugefügt werden. React erfordert ShouldComponentUpdate oder Full Immutable, Angular 2 erfordert die manuelle Angabe der Änderungserkennungsstrategie. Im Hinblick auf den allgemeinen Trend werden sich Browser und Mobiltelefone immer schneller ändern. Die Rendering-Leistung des Frameworks selbst wird im gesamten Front-End-Leistungsoptimierungssystem allmählich nachlassen Methode, Cache und Bilder. Laden, Netzwerklinks, HTTP/2 usw..

Vier Modularisierung und Komponentisierung

Angular1 -> Angular2

Angular1 verwendet Abhängigkeitsinjektion, um das Abhängigkeitsproblem zwischen Modulen zu lösen Fast alle Module hängen vom Injektionscontainer ab Und andere verwandte Funktionen. Es wird nicht asynchron geladen Alle für den ersten Ladevorgang erforderlichen Abhängigkeiten werden entsprechend den Abhängigkeiten aufgelistet.

Kann mit etwas wie Require.js verwendet werden, um asynchrones Laden zu erreichen Lazy Loading (On-Demand-Laden) ist eine Lösung mit Hilfe von ocLazyLoad, aber im Idealfall sollte das lokale Framework einfacher sein zu verstehen.

Angular2 verwendet ES6-Module zum Definieren von Modulen und berücksichtigt auch die Notwendigkeit eines dynamischen Ladens.

Vue

Anweisungen und Komponenten in Vue sind klarer getrennt. Die -Direktive kapselt nur DOM-Operationen , während die -Komponente eine in sich geschlossene unabhängige Einheit darstellt – mit eigener Ansicht und Datenlogik**. In Angular1 herrscht große Verwirrung zwischen den beiden.

React

Eine React-Anwendung basiert auf React-Komponenten.
Komponenten haben zwei Kernkonzepte: Requisiten und Zustand.
Eine Komponente generiert die der Komponente entsprechende HTML-Struktur durch die Werte dieser beiden Attribute in der Render-Methode.

Herkömmliches MVC platziert die Vorlage an anderen Stellen, beispielsweise in Skript-Tags oder Vorlagendateien, und verweist dann auf irgendeine Weise auf die Vorlage in JS. Denken Sie in diesem Sinne daran, wie oft wir von überall verstreuten Vorlagenfragmenten überwältigt wurden. Ich bin verwirrt über die Vorlagen-Engine, wo die Vorlage gespeichert ist und wie auf die Vorlage verwiesen wird.

React glaubt, dass Komponenten König sind und Komponenten eng mit Vorlagen verbunden sind. Die Trennung von Komponentenvorlagen und Komponentenlogik verkompliziert das Problem. Es gibt also die JSX-Syntax, die darin besteht, die HTML-Vorlage direkt in den JS-Code einzubetten, sodass die Vorlage und die Komponente verknüpft sind , aber JS unterstützt diese Syntax, die HTML enthält, nicht, daher ist sie erforderlich sein 🎜>Kompilieren Sie JSX und geben Sie es über Tools in JS-Code aus, bevor es verwendet werden kann (was als Grundlage für die plattformübergreifende Entwicklung verwendet werden kann. Es kann über verschiedene Interpreter in Code interpretiert werden, der auf verschiedenen Plattformen ausgeführt wird. damit RN und React Desktop-Clients entwickeln können) .

5 Syntax und Codierungsstil

React, Vue und Angular2 unterstützen alle ES6, und Angular2 unterstützt offiziell den JavaScript-Stil von TypeScript.

React ist JavaScript-zentriert, während Angular 2 HTML-zentriert bleibt. Angular 2 bettet „JS“ in HTML ein. React bettet „HTML“ in JS ein. Angular 2 folgt dem Ansatz von Angular 1 und versucht, HTML leistungsfähiger zu machen.

Der empfohlene Ansatz für React ist der JSX + Inline-Stil, was bedeutet, dass HTML und CSS in JavaScript integriert werden. Die Standard-API von Vue soll einfach und benutzerfreundlich sein. Nach der Fortgeschrittenheit wird jedoch empfohlen, das Einzeldatei-Komponentenformat von Webpack + Vue-Loader zu verwenden (Vorlage, Skript und Stil werden als Komponente in eine Vue-Datei geschrieben)

Das obige ist der detaillierte Inhalt vonVergleich zwischen Angular React und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!