Vergleich zwischen vue.js und React: Ist React besser oder Vue.js besser?

vue.js und React sind beide Javascript-Bibliotheken, also Frameworks. Welches Framework ist also besser, vue.js oder React? In diesem Artikel erfahren Sie, ob React besser oder Vue.js besser ist, indem Sie das Vue.js-Framework und das React-Framework vergleichen. Interessierte Freunde können einen Blick darauf werfen.

Lassen Sie uns zunächst einen kurzen Blick auf die Konzepte des vue.js-Frameworks und des React-Frameworks werfen:

Vue ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen großen Frameworks ist Vue so konzipiert, dass es Schicht für Schicht von unten nach oben aufgetragen werden kann. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann.

React ist ein deklaratives, effizientes und flexibles Framework zum Erstellen von Benutzeroberflächen.

Die Konzepte der beiden JavaScript-Frameworks vue.js und React sind wie oben erwähnt. Aus dem Vergleich der Konzepte lässt sich nicht intuitiv erkennen, dass React besser oder Vue.js besser ist Vergleichen Sie vue.js und reagieren Sie in mehreren Aspekten.

Werfen wir zunächst einen Blick auf den Vergleich zwischen vue.js und der React-Datenbindung

1. Vue-Datenbindung

In Vue bezieht sich die Ansichtsebene auch auf Datenänderungen, einschließlich Interpolationsausdrücken, Befehlssystemen, Klasse und Stil, Ajax-Anfragen und berechneten Eigenschaften Schauen Sie sich diese Probleme im Zusammenhang mit der Datenbindung an.

Interpolationsausdruck: In Vue arbeiten Interpolationsausdrücke und Anweisungen mit Daten, auch als Vorlagensyntax bekannt.

Direktiven sind in Vue sehr praktisch. Direktiven sind spezielle Attribute mit dem Vue-Präfix und werden wahrscheinlich von Angular übernommen. Es gibt aber auch nicht genau das Gleiche.

Klasse und Stil: Eine häufige Notwendigkeit für die Datenbindung besteht darin, die Klassenliste eines Elements und seine Inline-Stile zu manipulieren. Da es sich bei allen um Eigenschaften handelt, können wir sie mit v-bind verarbeiten: Wir müssen lediglich die endgültige Zeichenfolge des Ausdrucks auswerten. Die Verkettung von Zeichenfolgen ist jedoch umständlich und fehleranfällig. Daher verbessert Vue.js speziell V-Bind, wenn es mit Klassen und Stilen verwendet wird. Der Ergebnistyp eines Ausdrucks kann neben Strings auch ein Objekt oder ein Array sein.

Ereignishandler: In Vue können wir Ereignisse für Elemente über v-on registrieren, um die Ereignisregistrierung abzuschließen. Der Unterschied zwischen der Ereignisverarbeitung in Vue und der üblichen Ereignisverarbeitung besteht darin, dass Daten verarbeitet werden können Verwenden Sie auch Inline-Prozessoren

Formularsteuerelemente: Sie können die V-Model-Direktive verwenden, um eine bidirektionale Datenbindung für Formularsteuerelemente zu erstellen. Basierend auf dem Steuerelementtyp wird automatisch die richtige Methode zum Aktualisieren des Elements ausgewählt. Die von Vue für Formularsteuerelemente bereitgestellte v-model*-Direktive ist sehr nützlich und kann die Informationen des Formularsteuerelements problemlos zurückgeben oder festlegen.

Ajax-Datenanfrage: Es wird empfohlen, Axios für Datenanfragen in vue2.0 zu verwenden

Berechnete Attribute: Berechnete Attribute werden in Vue eingeführt, um zu verhindern, dass zu viel Logik in die Vorlage eingefügt wird Dadurch wird die Vorlage überlastet und ist schwer zu warten. Dies löst nicht nur die oben genannten Probleme, sondern ermöglicht auch eine bessere Trennung von Vorlagen und Geschäftslogik.

2. React-Datenbindung

React erreicht Echtzeitaktualisierungen und -änderungen durch bidirektionale Bindung von Status- (Modellebene) und Ansichtsebenendaten Das heißt, schreiben Sie JS-Code direkt in die Ansichtsebene, um die Daten in der Modellebene zu rendern. Sobald die Datenänderungen durch Formularoperationen, Triggerereignisse, Ajax-Anfragen usw. ausgelöst werden, wird die Charakteristik durchgeführt von React ist die Komponentisierung.

Dann werfen wir einen Blick auf den Vergleich zwischen vue.js und React-Komponenten

React-Komponenten und Datenfluss

Es gibt zwei Möglichkeiten, Komponenten in React zu implementieren: Eine ist die Methode createClass und die andere wird durch Erben von React.Component über die ideologische Klasse ES2015 implementiert.

Es gibt zwei Arten der Datenkommunikation zwischen Reaktionskomponenten. Die erste ist die Datenkommunikation zwischen übergeordneten und untergeordneten Komponenten. Der zweite Typ ist die Datenkommunikation zwischen nicht übergeordneten und untergeordneten Komponenten.

Datenkommunikation zwischen übergeordneten und untergeordneten Komponenten:

In React wird die Datenkommunikation zwischen übergeordneten und untergeordneten Komponenten über das Props-Attribut geleitet, während untergeordnete und übergeordnete Komponenten die Datenkommunikation zwischen Dies kann durch die Definition von Ereignissen in der übergeordneten Komponente erfolgen. Wenn die untergeordnete Komponente das Ereignis in der übergeordneten Komponente auslöst, kommuniziert sie, indem sie die Daten in der übergeordneten Komponente in Form von tatsächlichen Parametern ändert.

Datenkommunikation zwischen Nicht-Eltern-Kind-Komponenten:

Nicht-Eltern-Kind-Komponenten, die nicht tief verschachtelt sind, können gemeinsame Elternkomponenten zum Auslösen von Ereignissen verwenden Funktionen und die Übergabe formaler Parameter erreichen dies; wenn die Komponentenebene sehr tief ist, stellt uns React hier offiziell eine Kontextmethode zur Verfügung, die es Unterkomponenten ermöglicht, direkt auf Vorgängerdaten oder -funktionen zuzugreifen, ohne Daten Schicht für Schicht von Vorgängerkomponenten an diese zu übergeben in untergeordneten Komponenten.

Lebenszyklus von Reaktionskomponenten:

construtor() //创建组件 
componentWillMount() //组件挂载之前 
componentDidMount() // 组件挂载之后 
componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数 
shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件，默认返回true 
componentDidUpdate() // 更新 
render() //渲染，react中的核心函数 
componentWillUnmount() //组件被卸载的时候调用，一般在componentDidMount注册的事件需要在这里删除

2. Komponenten und Datenfluss in Vue

Vue The Der Standardwert ist ein unidirektionaler Datenfluss, der direkt von Vue erklärt wird. Die übergeordnete Komponente kann standardmäßig Daten an die untergeordnete Komponente übergeben, die untergeordnete Komponente benötigt jedoch zusätzliche Einstellungen, um Daten an die übergeordnete Komponente zu übergeben.

Die Datenkommunikation zwischen übergeordneten und untergeordneten Komponenten wird durch Prop- und benutzerdefinierte Ereignisse erreicht, während nicht übergeordnete und untergeordnete Komponenten mithilfe des Abonnement-/Veröffentlichungsmodus implementiert werden können (ähnlich der Kommunikation zwischen nicht übergeordneten und untergeordneten Anweisungen in Angualr) und dann Wenn es komplizierter ist, wird empfohlen, die Statusverwaltung (vuex) zu verwenden.

Lebenszyklus von Vue-Komponenten:

Jede Vue-Instanz durchläuft eine Reihe von Initialisierungsprozessen, bevor sie erstellt wird. Sie müssen beispielsweise die Datenüberwachung einrichten, Vorlagen kompilieren, Instanzen im DOM bereitstellen, DOM aktualisieren, wenn sich Daten ändern usw. Gleichzeitig werden während dieses Prozesses auch einige Funktionen ausgeführt, die als Lebenszyklus-Hooks bezeichnet werden, sodass Benutzer in bestimmten Szenarien ihren eigenen Code hinzufügen können.

Zum Beispiel kann der erstellte Hook verwendet werden, um Code auszuführen, nachdem eine Instanz erstellt wurde. Es gibt auch einige andere Hooks, die in verschiedenen Szenarien im Instanzlebenszyklus aufgerufen werden, z. B. beim Mounten, Aktualisieren und Zerstören . Der Hook verweist auf die Vue-Instanz, die ihn aufgerufen hat.

Werfen wir einen Blick auf den Vergleich zwischen vue.js und React Routing

1. Routing in React

Routing In React ist lediglich die Installation des Plugins React-Router erforderlich. Bei Verwendung ist der Router eine Komponente von React.

2. Routing in Vue

Vues Routing-Bibliothek und Zustandsverwaltungsbibliothek werden offiziell synchron mit der Kernbibliothek gepflegt und unterstützt und aktualisiert; wir können Vue.js verwenden Erstellen Sie bereits Anwendungen durch Kombinieren von Komponenten. Wenn Sie Vue-Router hinzufügen möchten, müssen wir die Komponenten Routen zuordnen und Vue-Router dann mitteilen, wo sie gerendert werden sollen.

Schließlich werfen wir einen Blick auf den Vergleich zwischen vue.js und React State Management

1. State Management in React: Flux

Redux ist die beliebteste Flux-Implementierung im React-Ökosystem. Redux ist eigentlich nicht ansichtsebenenfähig und kann daher mit einigen einfachen Bindungen problemlos mit Vue verwendet werden.

2. Zustandsverwaltung in vue: vuex

vuex basiert auf Flux, Redux und The Elm Architecture. Im Gegensatz zu anderen Mustern ist Vuex eine Zustandsverwaltungsbibliothek, die speziell für Vue.js entwickelt wurde, um den feinkörnigen Datenantwortmechanismus von Vue.js für effiziente Zustandsaktualisierungen zu nutzen. Dies ermöglicht eine bessere Integration in Vue und bietet gleichzeitig eine einfache API und ein verbessertes Entwicklungserlebnis.

Der Kern jeder Vuex-Anwendung ist der Store. Ein „Store“ ist im Grunde ein Container, der den größten Teil des Status Ihrer Anwendung enthält.

Dieser Artikel endet hier. Wenn Sie ein Anfänger sind, ist Vue einfacher und Sie können schnell mit React und der Idee der vollständigen Komponentisierung und hohen Kohäsion beginnen. Geringe Kopplung und Requisiten sind Vorteile, aber wenn Sie es nicht gut spielen, werden Sie betrogen, die Größe des Projekts wird kein Problem sein, und es gibt auch eine aktive Community, Toolkette. Best Practices usw. Das Wichtigste ist natürlich, herauszufinden, was Sie lernen möchten und welches für Sie geeignet ist.

Das obige ist der detaillierte Inhalt vonVergleich zwischen vue.js und React: Ist React besser oder Vue.js besser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!