Vergleich von React und Vue an einem praktischen Beispiel

Der Autor des Materials, dessen Übersetzung wir heute veröffentlichen, sagt, dass er Vue bei der Arbeit verwenden muss und er hat diesen Rahmen gut studiert. Er war jedoch immer neugierig zu erfahren, wie sich die Dinge auf anderen Welten befinden, nämlich im React-Universum.

Er las die Dokumentation, sah sich ein paar Schulungsvideos an und obwohl ihm das alles sehr nützlich erschien, wollte er wirklich verstehen, was der Unterschied zwischen React und Vue war. Für ihn bestand die Suche nach Unterschieden zwischen den Frameworks nicht darin, herauszufinden, ob sie das virtuelle Objektmodell des Dokuments unterstützen oder wie genau sie die Seiten rendern. Er wollte, dass ihm jemand die Merkmale des Codes erklärte, um zu zeigen, was darin vor sich ging. Er hoffte, einen Artikel zu finden, der sich der Entdeckung solcher Unterschiede widmete, nachdem er gelesen hatte, dass jemand, der nur Vue oder React kannte (oder eine völlig neue Person in der Webentwicklung), die Unterschiede zwischen diesen Frameworks besser verstehen konnte.



Einen solchen Artikel konnte er jedoch nicht finden. Diese Tatsache führte ihn zu dem Verständnis, dass er selbst einen solchen Artikel nehmen und auf dem Weg schreiben musste, um die Ähnlichkeiten und Unterschiede zwischen React und Vue zu verstehen. In der Tat ist hier eine Beschreibung seines Experiments im Vergleich dieser beiden Frameworks.

Allgemeine Bestimmungen

Vue oder Reagieren?

Für das Experiment habe ich beschlossen, einige ziemlich standardmäßige Aufgabenanwendungen zu erstellen, mit denen der Benutzer Elemente zur Aufgabenliste hinzufügen und aus dieser entfernen kann. Beide Anwendungen werden mit Standard- create-react-app ( create-react-app React create-react-app für React und Vue vue-cli für Vue). CLI ist, wenn jemand es nicht weiß, eine Abkürzung, die für Command Line Interface (Befehlszeilenschnittstelle) steht, dh eine Befehlszeilenschnittstelle.

Jetzt schlage ich vor, das Erscheinungsbild der hier fraglichen Anwendungen zu betrachten.


Von Vue and React erstellte Anwendungen

Hier sind die Repositorys mit dem Code für diese Anwendungen: Vue ToDo , React ToDo .

Dort und dort wird derselbe CSS-Code verwendet. Der einzige Unterschied besteht darin, wo genau sich die entsprechenden Dateien befinden. Schauen wir uns vor diesem Hintergrund die Struktur der Projekte an.


Projektstruktur mit Vue und React

Wie Sie sehen, ist die Struktur dieser beiden Projekte nahezu identisch. Der einzige große Unterschied besteht darin, dass die React-Anwendung drei CSS-Dateien enthält, während die Vue-Anwendung diese überhaupt nicht enthält. Der Grund dafür ist, dass bei Verwendung create-react-app React create-react-app React-Komponenten mit den zugehörigen CSS-Dateien ausgestattet sind und Vue CLI einen anderen Ansatz verwendet, wenn Stile in einer bestimmten Komponentendatei deklariert werden.

Infolgedessen ermöglichen es uns sowohl der eine als auch der andere Ansatz, dasselbe Ziel zu erreichen, während uns auf Wunsch nichts daran hindert, Stile anders als Vue oder React zu organisieren. Tatsächlich hängt alles von den persönlichen Vorlieben der Person ab, die das Webprojekt erstellt. Beispielsweise wird das Thema CSS-Strukturierung in Entwicklergemeinschaften ständig diskutiert. Jetzt folgen wir einfach den Standard-CSS-Ansätzen, die in der CLI der betreffenden Frameworks festgelegt sind.

Bevor wir jedoch weiter gehen, werfen wir einen Blick darauf, wie eine typische Vue and React-Komponente aussieht.

Hier ist der Vue-Komponentencode (in unserem Projekt in der Datei ToDoItem.vue ).

 <template>   <div class="ToDoItem">       <p class="ToDoItem-Text">{{todo.text}}</p>       <div class="ToDoItem-Delete"            @click="deleteItem(todo)">-       </div>   </div> </template> <script>   export default {       name: "to-do-item",       props: ['todo'],       methods: {           deleteItem(todo) {               this.$emit('delete', todo)           }       }   } </script> <style>   .ToDoItem {       display: flex;       justify-content: center;       align-items: center;   }   .ToDoItem-Text {       width: 90%;       background-color: white;       border: 1px solid lightgrey;       box-shadow: 1px 1px 1px lightgrey;       padding: 12px;       margin-right: 10px;   }   .ToDoItem-Delete {       width: 20px;       padding: 5px;       height: 20px;       cursor: pointer;       background: #ff7373;       border-radius: 10px;       box-shadow: 1px 1px 1px #c70202;       color: white;       font-size: 18px;       margin-right: 5px;   }   .ToDoItem-Delete:hover {       box-shadow: none;       margin-top: 1px;       margin-left: 1px;   } </style> 

Hier ist der Code für die React-Komponente ( ToDoItem.js Datei).

 import React, {Component} from 'react'; import './ToDoItem.css'; class ToDoItem extends Component {   render() {       return (           <div className="ToDoItem">               <p className="ToDoItem-Text">{this.props.item}</p>               <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div>           </div>       );   } } export default ToDoItem; 

Jetzt ist es Zeit, in die Details einzutauchen.

Wie erfolgt die Datenänderung?

Das Ändern von Daten wird auch als "Datenmutation" bezeichnet. Wir sprechen über Änderungen an den Daten, die unsere Anwendung speichert. Wenn wir also den Namen einer bestimmten Person von „John“ in „Mark“ ändern müssen, sprechen wir von „Datenmutation“. In der Herangehensweise an Datenänderungen liegt der Hauptunterschied zwischen React und Vue. Vue erstellt nämlich ein data , in dem sich die Daten befinden und dessen Inhalt frei geändert werden kann. React erstellt ein Statusobjekt, in dem der Status der Anwendung gespeichert ist. Wenn Sie damit arbeiten, sind zusätzliche Anstrengungen erforderlich, um die Daten zu ändern. In React ist jedoch alles aus einem bestimmten Grund so angeordnet. Wir werden im Folgenden darauf eingehen und zunächst die oben genannten Objekte betrachten.

So sieht das von Vue verwendete data aus.

 data() {     return {         list: [             {               todo: 'clean the house'             },             {               todo: 'buy milk'             }         ],     } }, 

So sieht das in React verwendete Statusobjekt aus:

 constructor(props) {       super(props);       this.state = {           list: [               {                   'todo': 'clean the house'               },               {                   'todo': 'buy milk'               }           ],       };   }; 

Wie Sie sehen, beschreiben wir in beiden Fällen dieselben Daten, sie sind nur unterschiedlich gestaltet. Infolgedessen können wir sagen, dass die Übertragung der Anfangsdaten auf die Komponenten in Vue und React sehr, sehr ähnlich aussieht. Wie bereits erwähnt, unterscheiden sich die Ansätze zur Änderung vorhandener Daten in diesen Frameworks.

Angenommen, wir haben ein Datenelement wie den name: 'Sunil' . Dann habe ich der Namenseigenschaft meinen eigenen Namen zugewiesen.

In Vue können Sie mit dem Konstrukt this.name auf diese Daten this.name . Und so ändern Sie sie: this.name = 'John' . Ich weiß nicht genau, wie ich mich fühlen würde, wenn sich mein Name wirklich ändern würde, aber in Vue funktioniert es einfach so.

In React können Sie mit dem Konstrukt this.state.name auf dieselben Daten this.state.name . Eine Änderung durch Schreiben von this.state.name = 'John' ist jedoch nicht möglich, da React Einschränkungen aufweist, die solche Datenänderungen verhindern. Daher müssen Sie in React so etwas wie this.setState({name: 'John'}) .

Das Ergebnis einer solchen Operation ist das gleiche wie das, das nach einer einfacheren Operation in Vue erhalten wurde. Sie müssen mehr Code in React schreiben, aber in Vue gibt es so etwas wie eine spezielle Version der setState Funktion, die aufgerufen wird, wenn es sich anscheinend um eine einfache Datenänderung handelt. Zusammenfassend erfordert React daher die Verwendung des setState mit der Beschreibung der Daten, die geändert werden müssen, und Vue geht davon aus, dass der Entwickler etwas Ähnliches verwenden möchte, indem er die Daten im data ändert.

Fragen wir uns nun, warum React so setState und warum die setState Funktion überhaupt benötigt wird. Antworten auf diese Fragen finden Sie bei Revant Kumar : „Dies liegt daran, dass React bei einer shouldComponentUpdate versucht, bestimmte Lebenszyklus-Hooks wie componentWillReceiveProps , shouldComponentUpdate , componentWillUpdate , render , componentDidUpdate erneut auszuführen. Es erfährt, dass sich der Status geändert hat, wenn Sie die Funktion setState . Wenn Sie den Status direkt ändern würden, müsste React viel mehr Arbeit leisten, um Änderungen zu verfolgen, um festzustellen, welche Lifecycle-Hooks ausgeführt werden sollen usw. Infolgedessen verwendet React setState , um das Leben zu setState . “

Nachdem wir die Datenänderungen herausgefunden haben, wollen wir darüber sprechen, wie in beiden Versionen unserer Anwendung neue Aufgaben zur Aufgabenliste hinzugefügt werden können.

Fügen Sie der Aufgabenliste neue Elemente hinzu

▍Reakt

So geht's in React.

 createNewToDoItem = () => {   this.setState( ({ list, todo }) => ({     list: [         ...list,       {         todo       }     ],     todo: ''   }) ); }; 

Hier hat das für die Dateneingabe ( input ) verwendete Feld den Attributwert. Dieses Attribut wird automatisch aktualisiert, indem zwei miteinander verbundene Funktionen verwendet werden, die eine sogenannte bidirektionale Datenbindung bilden (falls Sie noch nichts davon gehört haben - warten Sie ein wenig, wir werden im Abschnitt über das Hinzufügen von Elementen zur Vue-Anwendung darauf eingehen). Wir erstellen diese Art der onChange Kommunikation aufgrund des Vorhandenseins eines zusätzlichen onChange Ereignis- onChange , der an das input angehängt ist. Schauen wir uns den Code für dieses Feld an, damit Sie verstehen, was hier passiert.

 <input type="text"      value={this.state.todo}      onChange={this.handleInput}/> 

Die Funktion handleInput aufgerufen, wenn sich der Wert des input ändert. Dies führt dazu, dass das todo Element, das sich innerhalb des todo befindet, aktualisiert wird, indem es auf den Wert im input wird. So sieht die handleInput Funktion aus.

 handleInput = e => { this.setState({   todo: e.target.value }); }; 

Wenn der Benutzer auf der Anwendungsseite auf die Schaltfläche + klickt, um der Liste einen neuen Datensatz createNewToDoItem , ruft die Funktion this.setState Methode this.setState und übergibt ihr die Funktion. Diese Funktion akzeptiert zwei Parameter. Das erste ist das gesamte handleInput dem handleInput , und das zweite ist das von der Funktion handleInput aktualisierte Aufgabenelement. Die Funktion gibt dann ein neues Objekt zurück, das das alte Listenarray enthält, und fügt am Ende dieses Arrays ein neues Aufgabenelement hinzu. Die Arbeit mit der Liste wird mithilfe des spread Operators organisiert (wenn Sie sie noch nicht kennengelernt haben, beachten Sie, dass dies eine der neuen Funktionen von ES6 ist, und suchen Sie nach Details dazu).

Schließlich wird eine leere Zeichenfolge in todo , die den value im input automatisch aktualisiert.

UeVue

Das folgende Konstrukt wird verwendet, um der Aufgabenliste in Vue ein neues Element hinzuzufügen.

 createNewToDoItem() {   this.list.push(       {           'todo': this.todo       }   );   this.todo = ''; } 

In Vue hat das Eingabefeld eine v-model Direktive. Sie können die bidirektionale Datenbindung organisieren. Schauen Sie sich den Code für dieses Feld an und sprechen Sie darüber, was hier vor sich geht.

 <input type="text" v-model="todo"/> 

Die Direktive v-model bindet ein Feld an einen Schlüssel, der in einem Datenobjekt namens toDoItem . Wenn die Seite toDoItem wird, wird eine leere Zeile in toDoItem . Es sieht wie toDoItem aus todo: '' .

Wenn bereits einige Daten vorhanden sind, z. B. todo: 'add some text here' , wird derselbe Text in das Eingabefeld eingegeben, 'add some text here' . Wenn wir mit einer leeren Zeichenfolge zum Beispiel zurückkehren, fällt der Text, den wir in das Feld eingeben, aufgrund der Datenbindung in die todo Eigenschaft. Dies ist eine bidirektionale Datenbindung, dh die Eingabe neuer Daten in das Feld führt zur Aufzeichnung dieser Daten im data , und die Aktualisierung der Daten im Objekt führt zum Auftreten dieser Daten im Feld.

createNewToDoItem() jetzt an die Funktion createNewToDoItem() , über die wir oben gesprochen haben. Wie Sie sehen können, todo wir den Inhalt von todo in das Listenarray ein und schreiben dann eine leere Zeichenfolge in todo .

Elemente aus einer Liste entfernen

▍Reakt

In React wird dieser Vorgang folgendermaßen ausgeführt.

 deleteItem = indexToDelete => {   this.setState(({ list }) => ({     list: list.filter((toDo, index) => index !== indexToDelete)   })); }; 

Während sich die Funktion deleteItem in der Datei ToDo.js , können Sie problemlos über ToDoItem.js , indem Sie diese Funktion zunächst als Eigenschaft an <ToDoItem/> . So sieht es aus:

 <ToDoItem deleteItem={this.deleteItem.bind(this, key)}/> 

Hier übergeben wir zunächst die Funktion, die sie untergeordneten Komponenten zur Verfügung stellt. Zusätzlich binden wir this und übergeben den key . Dieser Parameter wird von der Funktion verwendet, um das zu löschende ToDoItem Element von anderen Elementen zu unterscheiden. Dann machen wir in der ToDoItem Komponente Folgendes.

 <div className="ToDoItem-Delete" onClick={this.props.deleteItem}>-</div> 

Um auf die Funktion in der übergeordneten Komponente zugreifen zu können, muss this.props.deleteItem Konstrukt this.props.deleteItem verwendet werden.

UeVue

So löschen Sie ein Listenelement in Vue.

 onDeleteItem(todo){ this.list = this.list.filter(item => item !== todo); } 

Vue erfordert einen etwas anderen Ansatz zum Entfernen von Elementen als den in React verwendeten. Es sind nämlich drei Schritte zu unternehmen.

Zunächst müssen Sie Folgendes in dem Element tun, für das Sie die Funktion aufrufen müssen, um es zu löschen.

 <div class="ToDoItem-Delete" @click="deleteItem(todo)">-</div> 

Anschließend müssen Sie die emit Funktion als Methode in der ToDoItem.vue Komponente (in diesem Fall in ToDoItem.vue ) ToDoItem.vue . Dies sieht folgendermaßen aus.

 deleteItem(todo) {   this.$emit('delete', todo) } 

Außerdem stellen Sie möglicherweise fest, dass wir ToDoItem.vue in ToDo.vue ToDoItem.vue ToDo.vue .

 <ToDoItem v-for="todo in list"         :todo="todo"         @delete="onDeleteItem" // <-- this :)         :key="todo.id" /> 

Dies wird als benutzerdefinierter Ereignis-Listener bezeichnet. Es antwortet auf Anrufe mit der delete . Wenn ein ähnliches Ereignis erfasst wird, wird die Funktion onDeleteItem . Es befindet sich in ToDo.vue und nicht in ToDoItem.vue . Diese Funktion filtert, wie oben erwähnt, einfach das im data todo Array, um das Element zu entfernen, auf das geklickt wurde.

Darüber hinaus ist anzumerken, dass im Beispiel mit Vue einfach der Code für die @click Funktion in den @click . Es kann so aussehen.

 <div class="ToDoItem-Delete" @click="$emit('delete', todo)">-</div> 

Dies würde die Anzahl der Schritte zum Entfernen eines Listenelements von drei auf zwei reduzieren. Wie vorzugehen ist, hängt von den Vorlieben der Entwickler ab.

Um diesen Abschnitt zusammenzufassen, können wir sagen, dass in React der Zugriff auf die in den übergeordneten Komponenten beschriebenen Funktionen über this.props organisiert wird ( this.props , props an this.props Komponenten übergeben, eine Standardtechnik, die buchstäblich überall zu finden ist). In Vue müssen untergeordnete Komponenten Ereignisse mithilfe der emit auslösen. Diese Ereignisse werden bereits von der übergeordneten Komponente verarbeitet.

Arbeiten Sie mit Ereignis-Listenern

▍Reakt

In React sind Ereignis-Listener für etwas Einfaches, wie ein Klick-Ereignis, recht einfach. Hier ist ein Beispiel für das Erstellen eines Klickereignishandlers für eine Schaltfläche, mit der ein neues Aufgabenelement erstellt wird.

 <div className="ToDo-Add" onClick={this.createNewToDoItem}>+</div> 

Hier ist alles ganz einfach angeordnet, es ist der Verarbeitung solcher Ereignisse mit reinem JavaScript sehr ähnlich.

Es ist zu beachten, dass das Einrichten von Ereignis-Listenern zum Drücken von Tastenanschlägen, z. B. für die Enter , etwas länger dauert als in Vue. Hier muss das onKeyPress Ereignis wie folgt behandelt werden. Hier ist der Code für das Eingabefeld.

 <input type="text" onKeyPress={this.handleKeyPress}/> 

Die Funktion handleKeyPress ruft die Funktion createNewToDoItem , wenn sie einen createNewToDoItem bei der Enter erkennt. Es sieht so aus.

 handleKeyPress = (e) => { if (e.key === 'Enter') { this.createNewToDoItem(); } }; 

UeVue

Ereignishandler in Vue sind sehr einfach zu konfigurieren. Es reicht aus, das @ -Symbol zu verwenden und dann den Typ des Listeners anzugeben, den wir verwenden möchten.

Um beispielsweise einen Listener für Klickereignisse hinzuzufügen, können Sie den folgenden Code verwenden.

 <div class="ToDo-Add" @click="createNewToDoItem()">+</div> 

Bitte beachten Sie, dass @click für v-on:click . Vue Event Listener sind gut darin, sehr fein kontrolliert zu werden. Wenn Sie beispielsweise das Konstrukt .once an den Listener .once , wird der Listener nur einmal .once .

Es gibt viele Abkürzungen, die das Schreiben von Hörern vereinfachen, die auf Tastenanschläge auf der Tastatur reagieren. In React dauert dies, wie gesagt, länger als in Vue. Hier geht es ganz einfach.

 <input type="text" v-on:keyup.enter="createNewToDoItem"/> 

Daten an untergeordnete Komponenten übergeben

▍Reakt

In React werden Eigenschaften beim Erstellen an die untergeordnete Komponente übergeben. Zum Beispiel so:

 <ToDoItem key={key} item={todo} /> 

Hier sehen Sie zwei Eigenschaften, die an die ToDoItem Komponente übergeben wurden. Von nun an kann in der this.props Komponente über this.props auf sie zugegriffen werden.

Um beispielsweise auf die Eigenschaft item.todo , verwenden Sie einfach das Konstrukt this.props.item .

UeVue

In Vue werden Eigenschaften beim Erstellen auch an untergeordnete Komponenten übergeben.

 <ToDoItem v-for="todo in list"           :todo="todo"           :key="todo.id"           @delete="onDeleteItem" /> 

Danach werden sie an das props der untergeordneten Komponente übergeben, beispielsweise mithilfe des Konstrukts props: [ 'todo' ] . Sie können auf diese Eigenschaften in untergeordneten Komponenten nach Namen zugreifen. In unserem Fall handelt es sich um den Namen 'todo' .

Daten an die übergeordnete Komponente übergeben

▍Reakt

In React wird die Funktion zuerst als Eigenschaft an die untergeordnete Komponente übergeben, in der die untergeordnete Komponente aufgerufen wird. Anschließend ist geplant, diese Funktion aufzurufen, indem Sie sie beispielsweise als onClick Handler hinzufügen oder indem Sie this.props.whateverTheFunctionIsCalled aufrufen. Dies führt zu einem Aufruf der Funktion in der übergeordneten Komponente. Dieser Vorgang wird im Abschnitt zum Entfernen von Elementen aus der Liste beschrieben.

UeVue

Bei Verwendung von Vue in einer untergeordneten Komponente reicht es aus, eine Funktion zu schreiben, die Daten an die übergeordnete Funktion übergibt. In die übergeordnete Komponente wird eine Funktion geschrieben, die auf Wertübertragungsereignisse wartet. Wenn ein ähnliches Ereignis eintritt, wird eine solche Funktion aufgerufen. Wie bei React finden Sie eine Beschreibung dieses Vorgangs im Abschnitt zum Entfernen von Elementen aus der Liste.

Zusammenfassung

Wir sprachen darüber, wie Sie Daten in Vue- und React-basierten Anwendungen hinzufügen, entfernen und ändern, wie Sie Daten in Form von Eigenschaften von übergeordneten Komponenten an untergeordnete Komponenten übertragen und wie Sie Daten von untergeordneten Komponenten an übergeordnete Komponenten senden. Wir glauben, dass nach der Analyse der Beispiele für Ähnlichkeiten und Unterschiede Vue und React mit bloßem Auge sichtbar sind.

Es gibt natürlich noch viele andere kleine Unterschiede zwischen React und Vue, aber ich hoffe, dass das, was wir hier behandelt haben, eine gute Grundlage für das Verständnis der Funktionsweise dieser Frameworks darstellt. Frameworks werden häufig analysiert, wenn die richtige Plattform für ein neues Projekt ausgewählt wird. Wir hoffen, dass dieses Material bei einer solchen Auswahl hilft.

Liebe Leser! Welche Unterschiede zwischen React und Vue sind Ihrer Meinung nach die wichtigsten, die sich auf die Auswahl eines bestimmten Frameworks auswirken, beispielsweise als Grundlage für ein bestimmtes Projekt?