Was ist der Unterschied zwischen React und Vue?

Vue hat die Wahl zwischen React und Angular. Das Framework selbst hat etwas mehr Syntax als React, aber etwas weniger als Angular.

Gerade aufgrund der unterschiedlichen Wahlmöglichkeiten werden die vorgestellten Schreib- und Denkmethoden sicherlich unterschiedlich sein, unabhängig davon, ob sie gut oder schlecht sind, aber sie werden definitiv zu unterschiedlichen Vorlieben führen.

Die Einfachheit von React besteht darin, dass seine Kern-API tatsächlich sehr klein ist. Daher werden wir viele Stellen sehen, die sagen, dass es sich bei React tatsächlich um eine UI-Bibliothek und nicht um ein vollständiges Framework handelt. Er erklärt uns lediglich, wie man Komponenten erstellt und wie man Daten zwischen Komponenten überträgt. Sogar die Möglichkeit, Komponenten zu erstellen, besteht darin, die ES6-Klassensyntax zu verwenden (createClass wird in Reaktion 16 verworfen).

Daher ist die Verwendung von React in der Entwicklung stark von der Syntax von ES6 abhängig. Weil React selbst keine sehr restriktive Syntax hat. Wir müssen nur die Requisiten, den Status, die Referenz und den Lebenszyklus in der Komponente beherrschen. Es scheint, dass es nicht viel zusätzliches Wissen gibt. Selbst wenn Sie das Rendering in einer jsx-Vorlage durchlaufen möchten, müssen Sie die native Kartenmethode verwenden. Was die höherwertigen Komponenten von React angeht, stellte ich nach dem Verständnis fest, dass es sich tatsächlich um die Denkweise der funktionalen JavaScript-Programmierung handelt.

Meiner Meinung nach ist das größte Merkmal von React, dass es einfach ist und nativem JavaScript sehr nahe kommt. Das heißt, es bringt den Entwicklern nur sehr wenige Einschränkungen mit sich. Um eine Funktion zu implementieren: Wenn Sie wissen, wie man sie mit nativem JavaScript implementiert, können Sie auch leicht wissen, wie man sie mit React implementiert.

Natürlich bedeutet die einfache Kern-API nicht, dass der Einstieg einfach ist. Wenn Sie zu Beginn der Nutzung keine Erfahrung haben, kann die Leistung der mit React geschriebenen Seiten sehr schlecht sein. Denn unbeabsichtigt kann es sein, dass Ihre Komponente viele redundante Renderings aufweist.

Wenn viele Leute beispielsweise lernen, zu reagieren, werden sie auf ein Countdown-Beispiel stoßen. Dieses Beispiel wird durch Ändern des Status in der Komponente implementiert. Aber tatsächlich wird jedem nach und nach klar, dass dieser Ansatz völlig falsch ist. Denn jede Zustandsänderung führt dazu, dass die Komponente und alle ihre Unterkomponenten neu gerendert werden. Das ist ein sehr kostspieliges Verhalten. Natürlich weiß ich auch, dass viele Leute beim Debuggen den Browser aufgrund des hochfrequenten wiederholten Renderns direkt einfrieren. Diese Probleme werden durch zu wenige Einschränkungen verursacht, die You Yuxi beunruhigen.

Einige Leute im Internet, die sie für großartig halten, verwenden Frameworks wie React/Vue, schreiben aber tatsächlich den gleichen Code. Das Erschreckende ist, dass sie immer noch dies und das lächerlich machen. Ich traf auch jemanden, der immer wieder sagte, dass er Angular schon seit vielen Jahren benutze. Er sagte, dass Angular wirklich Quatsch sei, die Leistung so schlecht sei und dass er am Ende nicht einmal Track verwenden könne von. trinken!

Und React hat keine echte Zwei-Wege-Bindung. Daher wird es sehr mühsam sein, mit einigen komplexen Szenarien umzugehen, wie z. B. der Validierung komplexer Formulare.

Relativ gesehen bietet Vue mehr Funktionen. Diese praktischen Funktionen werden Anfängern sehr viel Freude bereiten, da viele Effekte mit nur wenigen einfachen Codes erzielt werden können. Ich werde wahrscheinlich ein paar Funktionen auflisten, die ich persönlich großartig finde:

• Einheitliche Verwaltung berechneter Eigenschaften

JavaScript-Ausdrücke sind trotzdem sehr praktisch Ob Vue oder React, die Fähigkeit, sich auszudrücken, ist von entscheidender Bedeutung. Aber wie es in der offiziellen Vue-Dokumentation heißt, führt das Einfügen von zu viel Logik in die Vorlage dazu, dass die Vorlage übergewichtig und schwer zu pflegen ist. Die Vue-Komponente stellt eine berechnete Eigenschaft zur einheitlichen Verwaltung von Ausdrücken bereit.

<template><p id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p></p></template><script>export default {name: &#39;example&#39;,
    data () {return {message: &#39;Hello&#39;
        }
    },computed: {reversedMessage: function() {return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)
        }
    }
}</script>

• Die dynamische Syntax der Klasse macht mich sehr glücklich

In der Praxis werden wir viele solcher Szenarien finden, die es sein müssen Basierend auf verschiedenen Zuständen wird der spezifische Wert einer Elementklasse bestimmt. Und wenn es sich beispielsweise nur um einen einfachen Ausdruck oder eine bedingte Beurteilung in der jsx-Vorlage handelt, werden sich die Leute sehr unwohl fühlen, wenn es wie folgt aussieht

<p className={active ? &#39;note active&#39; : &#39;note&#39;}></p>

Wenn etwas komplexere Logik so gehandhabt wird , es wird unerträglich sein. Die in vue unterstützte Syntax löst dieses Problem sehr einfach.

// 可以放在任何你觉得舒服的位置const pcls = {active: active,note: true
}

<p class={pcls}></p>

Auf diese Weise werden wir weiterhin weitere Klassennamen hinzufügen, ohne zusätzliche Komplexität zu verursachen.

Natürlich ist dies nur ein Problem, das mit einer Tool-Methode gelöst werden kann. Bei Verwendung von React können Sie Klassennamen verwenden, um dieselbe Funktion auszuführen. Aber vue unterstützt es direkt.

• Zwei-Wege-Bindung

Da React keine Zwei-Wege-Bindung unterstützt, ist die Implementierung einer komplexen Formularvalidierung sehr mühsam . . Während Vue den unidirektionalen Datenfluss als Kern zugrunde legt, verzichtet es nicht vollständig auf die bidirektionale Bindung, wodurch die Entwicklungseffizienz in solch komplexen Formularüberprüfungsszenarien viel höher ist als die von React. Dies ist auch ein Aspekt von Vue, der Ärger erspart.

• Modifikator

Wenn wir Ereignisverarbeitungslogik schreiben, benötigen wir häufig Operationen wie e.preventDefault. Die von vue bereitgestellte Modifikatorfunktion kann uns beim Speichern dieser Codes helfen, was äußerst praktisch ist. Wenn Sie es häufiger verwenden, werden Sie feststellen, dass es wirklich nützlich ist.

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联  --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件侦听器时使用事件捕获模式 --><p v-on:click.capture="doThis">...</p><!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><p v-on:click.self="doThat">...</p>

Natürlich gibt es auch Schlüsselmodifikatoren usw. Weitere Informationen finden Sie auf der offiziellen Website.

Vue bietet viele praktische und schöne syntaktische Zucker, daher werde ich nicht auf Details eingehen. Sie können sie einzeln auf der offiziellen Website erleben. Wie am Anfang des Artikels erwähnt, wird Vue einige grammatikalische Einschränkungen haben, und diese grammatikalischen Einschränkungen reduzieren unsere Entwicklungskosten und verbessern in gewissem Maße die Entwicklungseffizienz. Dies ist wahrscheinlich der Grund, warum viele Leute denken, dass Vue einfacher und leichter zu erlernen ist.

Im Hinblick auf die Leichtigkeit des Lernens liegt der Hauptgrund, warum React schwieriger zu starten ist, nicht in React selbst, sondern im reichhaltigen Ökosystem, das React umgibt. Gerade weil React selbst einfach genug ist, müssen wir mehr React-Komponenten beherrschen. Wie React-Router, React-Redux usw. Und es gibt viele nützliche Komponenten mit großartigen Funktionen, von denen wir nicht einmal wussten, als wir nicht viel darüber wussten. Wenn ich zum Beispiel den Quellcode von Ant-Design studiere, bin ich oft überrascht, dass es hier eine Komponente gibt, die auf diese Weise verwendet werden kann. Es ist wirklich großartig! Und als ich Vue lernte, war ich überrascht, dass Vue bereits solch großartige Komponenten unterstützt!

Später entdeckte ich, dass Vue und React so ähnlich sind.

Ich bevorzuge immer noch die Reaktion. Aber das liegt nur daran, dass die Syntax von React näher an ES6 ist

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