Vergleichen Sie mit anderen Frameworks


Diese Seite ist zweifellos am schwierigsten zu schreiben, aber wir denken, dass sie auch sehr wichtig ist. Möglicherweise sind Sie auf einige Probleme gestoßen und haben diese mit anderen Frameworks gelöst. Ihr Ziel hier ist es herauszufinden, ob Vue eine bessere Lösung hat. Das wollen wir hier beantworten.

Objektiv gesehen bevorzugen wir als Mitglieder des Kernteams offensichtlich Vue und denken, dass Vue für die Lösung einiger Probleme besser geeignet wäre. Wenn wir diesen Glauben nicht hätten, wären wir nicht den ganzen Tag damit beschäftigt, daran zu arbeiten. Aber hier wollen wir alles so fair und genau wie möglich beschreiben. Auch andere Frameworks bieten erhebliche Vorteile, etwa das umfangreiche Ökosystem von React oder die Browserunterstützung von Knockout, die IE6 abdeckt. Wir werden versuchen, sie alle aufzulisten.

Wir würden uns auch über Ihre Hilfe freuen, um die Dokumentation auf dem neuesten Stand zu halten, da sich die Welt von JavaScript so schnell weiterentwickelt. Wenn Ihnen eine Ungenauigkeit oder etwas auffällt, das nicht ganz richtig erscheint, reichen Sie bitte ein Problem ein, um uns darüber zu informieren.


Verzeichnis


React


React und Vue haben viele Gemeinsamkeiten, beide haben:

  • UseVirtual DOM

  • bietet reaktionsfähige (reaktive) und komponentenbasierte (zusammensetzbare) Ansichtskomponenten.

  • Konzentrieren Sie sich weiterhin auf die Kernbibliothek und überlassen Sie andere Funktionen wie Routing und globale Statusverwaltung verwandten Bibliotheken.

Aufgrund der vielen Gemeinsamkeiten werden wir mehr Zeit damit verbringen, diesen Bereich zu vergleichen. Dabei achten wir nicht nur auf die Richtigkeit technischer Inhalte, sondern berücksichtigen auch ausgewogene Gesichtspunkte. Wir müssen die Dinge anerkennen, die React besser als Vue machen, wie zum Beispiel das reichhaltigere Ökosystem.

Einige der folgenden Kapitel sind aufgrund der jüngsten Veröffentlichung von React 16 möglicherweise etwas veraltet und wir planen, diesen Teil des Inhalts in naher Zukunft gemeinsam mit der React-Community neu zu schreiben.


Laufzeitleistung

React und Vue sind beide sehr schnell, daher ist die Geschwindigkeit nicht ausschlaggebend Faktor bei der Wahl zwischen ihnen. Für eine bestimmte Datenleistung können Sie zu diesem Drittanbieter-Benchmark wechseln, der sich auf die tatsächliche Leistung beim Rendern/Aktualisieren eines sehr einfachen Komponentenbaums konzentriert.

Optimierung

Wenn sich in einer React-Anwendung der Status einer Komponente ändert, wird der gesamte Komponententeilbaum mit der Komponente als Wurzel neu gerendert.

Um unnötiges erneutes Rendern untergeordneter Komponenten zu vermeiden, müssen Sie, wo immer möglich, PureComponent verwenden oder die shouldComponentUpdate-Methode manuell implementieren. Gleichzeitig müssen Sie möglicherweise unveränderliche Datenstrukturen verwenden, um die Optimierung Ihrer Komponenten zu erleichtern.

Bei Verwendung von PureComponent und shouldComponentUpdate müssen Sie jedoch sicherstellen, dass die Rendering-Ausgabe des gesamten Teilbaums der Komponente durch die Requisiten der Komponente bestimmt wird. Ist dies nicht der Fall, können solche Optimierungen zu nicht wahrnehmbaren Rendering-Inkonsistenzen führen. Dies führt dazu, dass die Komponentenoptimierung in React mit einer erheblichen mentalen Belastung verbunden ist.

In Vue-Anwendungen werden Komponentenabhängigkeiten während des Rendervorgangs automatisch verfolgt, sodass das System genau erkennen kann, welche Komponenten wirklich neu gerendert werden müssen. Sie können verstehen, dass jede Komponente automatisch shouldComponentUpdate erhalten hat und es keine Einschränkung für das oben erwähnte Teilbaumproblem gibt.

Diese Funktion von Vue macht es für Entwickler überflüssig, solche Optimierungen in Betracht zu ziehen, und ermöglicht es ihnen, sich besser auf die Anwendung selbst zu konzentrieren.


HTML & CSS

In React ist alles JavaScript. Mit JSX kann nicht nur HTML ausgedrückt werden, sondern der aktuelle Trend geht auch zunehmend dahin, CSS zur Verarbeitung in JavaScript zu integrieren. Dieser Ansatz hat seine Vorteile, es gibt jedoch auch Kompromisse, mit denen nicht jeder Entwickler zufrieden ist.

Die ganze Idee von Vue besteht darin, klassische Webtechnologien zu übernehmen und sie zu erweitern. Wir werden es im Folgenden im Detail analysieren.

JSX vs. Templates

In React basieren alle Komponenten-Rendering-Funktionen auf JSX. JSX ist syntaktischer Zucker zum Schreiben von JavaScript mithilfe der XML-Syntax.

Die Verwendung der Rendering-Funktionen von JSX hat folgende Vorteile:

  • Sie können die volle Funktionalität der Programmiersprache JavaScript nutzen, um Ihre Ansichtsseiten zu erstellen. Sie können beispielsweise temporäre Variablen oder die mit JS gelieferte Flusskontrolle verwenden und direkt auf den Wert im aktuellen JS-Bereich verweisen usw.

  • Die Unterstützung der Entwicklungstools für JSX ist im Vergleich zu anderen derzeit verfügbaren Vue-Vorlagen relativ weit fortgeschritten (z. B. Linting, Typprüfung, automatische Vervollständigung des Editors).

Tatsächlich bietet Vue auch Rendering-Funktion und unterstützt sogar JSX. Unsere Standardempfehlung sind jedoch Vorlagen. Jedes HTML, das der Spezifikation entspricht, ist eine legale Vue-Vorlage, was auch einige einzigartige Vorteile mit sich bringt:

  • Für viele Entwickler, die an HTML gewöhnt sind, sind Vorlagen besser lesbar als JSX. Es fühlt sich mehr an natürlich zu schreiben. Natürlich gibt es hier ein Element der subjektiven Präferenz, aber wenn dieser Unterschied zu einer Verbesserung der Entwicklungseffizienz führt, dann hat er einen objektiven Wert.

  • HTML-basierte Vorlagen erleichtern die schrittweise Migration vorhandener Anwendungen zu Vue.

  • Dies erleichtert auch Designern und neuen Entwicklern das Verständnis und die Teilnahme am Projekt.

  • Sie können sogar andere Vorlagenpräprozessoren wie Pug verwenden, um Vue-Vorlagen zu schreiben.

Einige Entwickler denken, dass Vorlagen bedeuten, dass man für die Entwicklung eine zusätzliche DSL (Domain-Specific Language) erlernen muss – wir halten diese Unterscheidung für oberflächlich. Erstens ist JSX nicht kostenlos zu erlernen – es handelt sich um einen zusätzlichen Syntaxsatz zusätzlich zu JS. Gleichzeitig ist es für Personen, die mit JS vertraut sind, einfach, JSX zu erlernen, und für Personen, die mit HTML vertraut sind, ist es auch einfach, die Vorlagensyntax von Vue zu erlernen. Schließlich ermöglicht uns die Existenz von DSL, dass Entwickler mehr Dinge mit weniger Code tun können, beispielsweise die verschiedenen Modifikatoren von v-on. Die Implementierung der entsprechenden Funktionen in JSX erfordert viel mehr Code.

Abstrakter betrachtet können wir Komponenten in zwei Kategorien einteilen: eine ist präsentativ und die andere ist logisch. Wir empfehlen die Verwendung von Vorlagen für Ersteres und JSX- oder Renderfunktionen für Letzteres. Der Anteil dieser beiden Arten von Komponenten variiert je nach Anwendungstyp, aber insgesamt stellen wir fest, dass es weitaus mehr Präsentationskomponenten als logische Komponenten gibt.

Komponentenbezogenes CSS

Sofern Sie Komponenten nicht auf mehrere Dateien verteilen (z. B. CSS-Module), wird das CSS-Scoping in React durch die CSS-in-JS-Lösung implementiert (z. B. styled-components , glamourös und Emotion). Dies führt ein neues komponentenorientiertes Stilparadigma ein, das sich vom normalen CSS-Schreibprozess unterscheidet. Darüber hinaus wird zwar unterstützt, CSS zum Zeitpunkt der Erstellung in ein separates Stylesheet zu extrahieren, das Bundle erfordert jedoch in der Regel ein Laufzeitprogramm, damit diese Stile wirksam werden. Während Sie JavaScript zur flexiblen Handhabung von Stilen verwenden können, müssen Sie auch Kompromisse bei der Bundle-Größe und dem Laufzeitaufwand eingehen.

Wenn Sie ein CSS-in-JS-Fan sind, unterstützen viele gängige CSS-in-JS-Bibliotheken auch Vue (z. B. styled-components-vue und vue -emotion<). 🎜>). Der Hauptunterschied zwischen React und Vue besteht darin, dass die Standardmethode von Vue zum Festlegen von Stilen ein Tag ist, der in der Einzeldateikomponente ähnelt. style

Einzeldateikomponenten geben Ihnen als Teil des Komponentencodes die vollständige Kontrolle über CSS in derselben Datei.

<style scoped>
  @media (min-width: 250px) {
    .list-container:hover {
      background: orange;
    }
  }
</style>

Dieses optionale

-Attribut fügt automatisch ein eindeutiges Attribut (z. B. scoped) hinzu, um den Bereich für das CSS innerhalb der Komponente anzugeben. Während der Kompilierung wird data-v-21e5b78 in etwas wie < kompiliert 🎜>. .list-container:hover.list-container[data-v-21e5b78]:hoverSchließlich ist die Stileinstellung in der Einzeldateikomponente von Vue sehr flexibel. Mit

vue-loader

können Sie jeden Präprozessor und Postprozessor verwenden und sogar CSS-Module tief integrieren – alles innerhalb des -Tags. <style>


Skalieren

Skalieren

Vue und React bietet leistungsstarkes Routing für die Verarbeitung großer Anwendungen. Die React-Community ist sehr innovativ in der Zustandsverwaltung (wie Flux, Redux), und diese Zustandsverwaltungsmuster und sogar

Redux selbst

können problemlos in Vue-Anwendungen integriert werden. Tatsächlich hat Vue dieses Modell weiterentwickelt (Vuex) und die Zustandsverwaltungslösung Vuex von Vue tiefer integriert, was Ihnen meiner Meinung nach ein besseres Entwicklungserlebnis bieten kann.

Ein weiterer wichtiger Unterschied zwischen den beiden besteht darin, dass die Routing-Bibliothek und die Zustandsverwaltungsbibliothek von Vue offiziell synchron mit der Kernbibliothek gepflegt, unterstützt und aktualisiert werden. React überlässt diese Probleme der Community und schafft so ein dezentraleres Ökosystem. Aber relativ gesehen ist das Ökosystem von React wohlhabender als das von Vue.

Schließlich bietet Vue CLI-Gerüst, mit dem Sie durch interaktive Gerüstführung ganz einfach Projekte erstellen können. Sie können damit sogar schnell Prototypen von Komponenten entwickeln. React bietet diesbezüglich auch create-react-app an, allerdings gibt es noch einige Einschränkungen:

  • Es lässt keine Konfiguration zu, wenn das Projekt generiert wird, Vue CLI läuft auf skalierbaren Laufzeitabhängigkeiten, die durch Plugins erweitert werden können.

  • Es bietet nur eine Standardoption zum Erstellen einer Single-Page-Anwendung, während Vue Vorlagen für verschiedene Zwecke bereitstellt.

  • Es können keine Projekte mit vom Benutzer erstellten Standardkonfigurationen erstellt werden, was besonders nützlich für vorab festgelegte Konventionen in Unternehmensumgebungen ist.

Obwohl es wichtig ist zu beachten, dass diese Einschränkungen beabsichtigt sind, hat dies auch Vorteile. Wenn Ihre Projektanforderungen beispielsweise sehr einfach sind, müssen Sie den Build-Prozess nicht anpassen. Sie können es als Abhängigkeit aktualisieren. Lesen Sie mehr über verschiedene Designideen.

Skalieren

React hat eine steile Lernkurve. Bevor Sie mit dem Erlernen von React beginnen, müssen Sie JSX und ES2015 kennen, da viele Beispiele diese Syntaxen verwenden. Sie müssen das Build-System erlernen, und obwohl Sie Babel technisch gesehen zum Kompilieren Ihres Codes im Handumdrehen verwenden können, wird dies für den Produktionseinsatz nicht empfohlen.

So wie Vue vergrößert wird, um wie React zu sein, wird Vue verkleinert, um wie jQuery zu sein. Sie müssen nur die folgenden Tags auf der Seite einfügen, um sie auszuführen:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Anschließend können Sie Vue-Code schreiben und auf die Produktion anwenden. Sie müssen ihn nur durch die Mindestanzahl ersetzen Machen Sie sich keine Sorgen über andere Leistungsprobleme.

Da es in der Anfangsphase nicht erforderlich ist, JSX, ES2015 zu erlernen und Systeme zu erstellen, können Entwickler einfache Anwendungen in weniger als einem Tag erstellen, indem sie den Leitfaden lesen.


Natives Rendering

React Native ermöglicht es Ihnen, Apps (iOS und Android) mit nativen Rendering-Funktionen unter Verwendung desselben Komponentenmodells zu schreiben. Die Möglichkeit, auf mehreren Plattformen gleichzeitig zu entwickeln, ist für Entwickler großartig. Dementsprechend werden Vue und Weex offiziell zusammenarbeiten. Weex ist ein von Alibaba initiiertes plattformübergreifendes Benutzeroberflächen-Entwicklungsframework. Weex ermöglicht auch die Entwicklung von Vue-Syntax Nur Komponenten, die im Browser ausgeführt werden und auch zur Entwicklung nativer Anwendungen auf iOS und Android verwendet werden können. Derzeit entwickelt sich Weex noch aktiv weiter und seine Reife kann nicht mit React Native mithalten. Die Entwicklung von Weex wird jedoch von den Bedürfnissen der weltweit größten E-Commerce-Unternehmen vorangetrieben, und das Vue-Team wird auch aktiv mit dem Weex-Team zusammenarbeiten, um eine gute Entwicklungserfahrung für Entwickler zu gewährleisten.

Eine weitere Option ist

NativeScript-Vue

, ein NativeScript-Plugin zum Erstellen vollständig nativer Apps mit Vue.js.


MobX
Mobx Sehr beliebt in der React-Community und tatsächlich in Vue Es wird auch nahezu das gleiche Reaktionssystem verwendet. In begrenztem Umfang kann React Mobx auch als umständlichere Version von Vue angesehen werden. Wenn Sie es also gewohnt sind, sie in Kombination zu verwenden, ist es sinnvoller, sich für Vue zu entscheiden.


Preact und andere React-ähnliche Bibliotheken React-ähnliche Bibliotheken sind in der Regel genauso ähnlich Reagieren Sie so gut wie möglich, teilen Sie API und Ökosystem. Der obige Vergleich gilt also gleichermaßen für sie. Der Unterschied zwischen ihnen und React liegt oft in der kleineren Ökologie. Da diese Bibliotheken nicht zu 100 % mit allem im React-Ökosystem kompatibel sind, sind einige Tools und Hilfsbibliotheken möglicherweise nicht verfügbar. Selbst wenn es zu funktionieren scheint, kann es jederzeit zu Inkompatibilitäten kommen, es sei denn, die von Ihnen verwendete React-ähnliche Bibliothek stimmt offiziell strikt mit React überein.


AngularJS (Angular 1)

Einige Syntax von Vue ist der von AngularJS sehr ähnlich (z. B.
vs.

). Weil AngularJS die Inspiration für die frühe Entwicklung von Vue war. Viele in AngularJS bestehende Probleme wurden jedoch in Vue gelöst. v-ifng-if


KomplexitätVue.js ist sowohl in der API als auch in der API besser als Vue.js Designaspekte AngularJS ist viel einfacher, sodass Sie alle seine Funktionen schnell beherrschen und mit der Entwicklung beginnen können.


Flexibilität und Modularität

Vue.js ist eine flexiblere und offenere Lösung. Es ermöglicht Ihnen, Ihre Anwendung nach Ihren Wünschen zu organisieren, anstatt sich ständig an die von AngularJS festgelegten Regeln halten zu müssen, wodurch Vue für eine Vielzahl von Projekten geeignet ist. Wir wissen, dass es wichtig ist, die Entscheidung Ihnen zu überlassen.

Deshalb stellen wir ein komplettes System für schnelle Entwicklung auf Basis von Vue.js bereit. Vue CLI zielt darauf ab, das grundlegende Standardtool im Vue-Ökosystem zu werden. Es ermöglicht die nahtlose Zusammenarbeit verschiedener Build-Tools mit etablierten Standardkonfigurationen. Auf diese Weise können Sie sich auf die Anwendung selbst konzentrieren, ohne zu viel Zeit mit der Konfiguration zu verbringen. Gleichzeitig bietet es die Flexibilität, jede Werkzeugkonfiguration an den tatsächlichen Bedarf anzupassen.


Datenbindung

AngularJS verwendet eine bidirektionale Bindung, während Vue eine einseitige Bindung dazwischen erzwingt verschiedene Komponenten zum Datenfluss. Dadurch wird der Datenfluss in der Anwendung klarer und verständlicher.


Anweisungen und Komponenten

Anweisungen und Komponenten sind in Vue klarer getrennt. Direktiven kapseln nur DOM-Operationen, während Komponenten eine in sich geschlossene unabhängige Einheit darstellen – mit eigener Ansicht und Datenlogik. In AngularJS wird alles durch Direktiven erledigt, und Komponenten sind nur eine besondere Art von Direktive.


Laufzeitleistung

Vue hat eine bessere Leistung und ist sehr, sehr einfach zu optimieren, weil dies der Fall ist Ich verwende kein Dirty Checking.

Wenn in AngularJS immer mehr Beobachter vorhanden sind, wird es immer langsamer, da bei jeder Änderung des Umfangs alle Beobachter neu berechnet werden müssen. Wenn einige Beobachter außerdem ein weiteres Update auslösen, muss der Digest-Zyklus möglicherweise mehrmals ausgeführt werden. AngularJS-Benutzer greifen häufig auf esoterische Techniken zurück, um das Problem der Dirty-Checking-Schleifen zu lösen. Manchmal gibt es keine einfache Möglichkeit, ein Zielfernrohr bei einer großen Anzahl von Beobachtern zu optimieren.

Vue 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 klare Abhängigkeit zwischen ihnen besteht.

Interessanterweise verwenden Angular und Vue ähnliche Designs, um einige der in AngularJS bestehenden Probleme zu lösen.


Angular (ursprüngliches Angular 2)


Wir werden das neue Angular unabhängig entwickeln. Let's Besprechen Sie es, da es sich um ein völlig anderes Framework als AngularJS handelt. Zum Beispiel: Es verfügt über ein hervorragendes Komponentensystem, viele Implementierungen wurden komplett neu geschrieben und die API wurde komplett geändert.


TypeScript

Angular muss eigentlich in TypeScript entwickelt werden, da seine Dokumentation und Lernressourcen fast ausschließlich TS-orientiert sind. TS hat viele Vorteile – die statische Typprüfung ist in großen Anwendungen sehr nützlich und verbessert außerdem die Entwicklungseffizienz für Entwickler mit Java- und C#-Hintergrund erheblich.

Allerdings möchte nicht jeder TS nutzen – in kleinen und mittleren Projekten bringt die Einführung von TS möglicherweise nicht viele offensichtliche Vorteile. In diesen Fällen wäre die Verwendung von Vue die bessere Wahl, da die Verwendung von Angular ohne TS eine Herausforderung wäre.

Auch wenn die Integration von Vue und TS möglicherweise nicht so tief ist wie die von Angular, bieten wir auch offizielle Typdeklarationen und Komponentendekorateure an und wissen, dass es solche gibt große Anzahl von Benutzern Verwenden Sie die Kombination von Vue und TS in der Produktionsumgebung. Wir arbeiten auch aktiv mit dem TS/VSCode-Team von Microsoft zusammen, mit dem Ziel, Vue TS-Benutzern eine bessere Typprüfung und IDE-Entwicklungserfahrung zu bieten.


Laufzeitleistung

Beide Frameworks sind schnell und haben sehr ähnliche Benchmark-Daten. Sie können spezifische Daten durchsuchen, um einen detaillierteren Vergleich durchzuführen, aber Geschwindigkeit sollte nicht der entscheidende Faktor sein.


Volumen

In Bezug auf die Größe verwenden aktuelle Angular-Versionen AOT und Baumschütteln Die Technologie hat die endgültige Codegröße erheblich reduziert. Aber selbst dann ist ein Vue-Projekt, das Vuex Vue Router enthält (30 KB nach gzip), immer noch viel kleiner als die Standardprojektgröße, die von angular-cli unter Verwendung dieser Optimierungen generiert wurde (~65 KB).


Flexibilität

Vue ist flexibler als Angular und Vue stellt offiziell Build-Tools zur Verfügung. Es hilft Sie erstellen Ihr Projekt, aber es schränkt Sie nicht bei der Organisation Ihres Anwendungscodes ein. Manche Leute mögen vielleicht strenge Standards für die Code-Organisation, aber es gibt auch Entwickler, die einen flexibleren und freieren Ansatz bevorzugen.


Lernkurve

Um Vue zu lernen, benötigen Sie lediglich eine gute Grundlage in HTML und JavaScript. Mit diesen Grundkenntnissen können Sie sehr schnell in die Entwicklung einsteigen, indem Sie den Leitfaden lesen.

Angulars Lernkurve ist sehr steil – als Framework ist sein API-Bereich viel größer als der von Vue, sodass Sie mehr Konzepte verstehen müssen, um effizient arbeiten zu können. Natürlich ist die Komplexität von Angular selbst darauf zurückzuführen, dass es nur auf große und komplexe Anwendungen abzielt, aber es ist unbestreitbar, dass es dadurch auch für weniger erfahrene Entwickler ziemlich unfreundlich ist.


Ember


Ember ist ein All-in-One-Framework. Es bietet eine große Anzahl von Konventionen, und sobald Sie mit ihnen vertraut sind, wird die Entwicklung sehr effizient. Dies bedeutet jedoch auch, dass die Lernkurve hoch ist und es nicht flexibel ist. Dies bedeutet, Kompromisse zwischen Frameworks und Bibliotheken (plus einem lose gekoppelten Satz von Tools) einzugehen. Letzteres ist freier, erfordert aber auch, dass Sie mehr architektonische Entscheidungen treffen müssen.

Mit anderen Worten, unser bester Vergleich ist zwischen dem Vue-Kernel und Embers Vorlage und Datenmodell-Schicht:

  • Vue erstellt Antworten auf gewöhnliche JavaScript-Objekte und stellt automatisch berechnete Eigenschaften bereit. In Ember müssen Sie alles in ein Ember-Objekt einfügen und Abhängigkeiten für berechnete Eigenschaften manuell deklarieren.

  • Die Vorlagensyntax von Vue kann voll funktionsfähige JavaScript-Ausdrücke verwenden, während die Syntax von Handlers im Vergleich zu Hilfsfunktionen sehr eingeschränkt ist.

  • In Bezug auf die Leistung ist Vue viel besser als Ember , selbst mit der neuesten Glimmer-Engine von Ember 3.x. Vue kann Batches automatisch aktualisieren, während Ember in leistungsempfindlichen Szenarien eine manuelle Verwaltung erfordert. Knockout ist ein Pionier auf dem Gebiet der MVVM und der Verfolgung von Abhängigkeiten. Auch sein Reaktionssystem ist dem von Vue sehr ähnlich. Auch die Leistung bei der

    Browserunterstützung
  • und anderen Aspekten ist beeindruckend. Es kann mindestens IE6 unterstützen, während Vue mindestens IE9 unterstützen kann.


Knockout hat sich mit der Zeit etwas verlangsamt und sieht langsam etwas abgestanden aus. Dem Komponentensystem fehlen beispielsweise vollständige Lebenszyklus-Ereignismethoden, obwohl diese heutzutage sehr verbreitet sind. Und im Vergleich zu

Vue

ist die Methode zum Aufrufen der Schnittstelle der Unterkomponente etwas umständlich. Wenn Sie sich für Forschung interessieren, werden Sie auch feststellen, dass die beiden unterschiedliche Konzepte des Interface-Designs haben. Dies kann durch die von jedem erstellte einfache Todo-Liste widergespiegelt werden. Es mag etwas subjektiv sein, aber viele Leute denken, dass die API-Schnittstelle von Vue einfacher und eleganter in der Struktur ist.


Polymer


Polymer ist ein weiteres von Google gesponsertes Projekt und war tatsächlich eine Inspiration für Vue. Die Komponenten von Vue können grob mit den benutzerdefinierten Elementen von Polymer verglichen werden, und die beiden haben ähnliche Entwicklungsstile. Der größte Unterschied besteht darin, dass Polymer auf der neuesten Version des Web Components-Standards basiert und schwere Polyfills benötigt, um zu funktionieren (mit Leistungseinbußen), und der Browser selbst diese Funktionen nicht unterstützt. Im Vergleich dazu ist Vue nicht auf Polyfills angewiesen, um zu funktionieren, wenn es IE9 unterstützt.

Um die Leistung zu kompensieren, nutzte das Team in der Polymer-Version nur sehr begrenzt das Datenbindungssystem. Die einzigen in Polymer unterstützten Ausdrücke sind beispielsweise die boolesche Negation und ein einzelner Methodenaufruf, und die Implementierung der berechneten Methode ist nicht sehr flexibel.


Riot


Riot 3.0 bietet ein ähnliches komponentenbasiertes Entwicklungsmodell (genannt Tag in Riot) bietet es eine kleine und elegante API. Riot und Vue haben möglicherweise viele Ähnlichkeiten in der Designphilosophie. Obwohl Vue etwas schwerer ist als Riot, hat Vue dennoch viele wesentliche Vorteile:

  • Bessere Leistung. Riot verwendet Traverse the DOM tree anstelle von virtuellem DOM, verwendet jedoch tatsächlich einen Dirty-Checking-Mechanismus, sodass es unter den gleichen Leistungsproblemen wie AngularJS leidet.

  • Unterstützung ausgereifterer Tools. Vue bietet offiziellen Support für Webpack und Browserify, während Riot beim Aufbau integrierter Systeme auf die Community angewiesen ist.