Wenn Sie herausfinden möchten, welches dieser beiden großartigen Frameworks Sie wählen sollen, lesen Sie die Meinung des Vue-Befürworters zu diesem Thema, die ich übersetzt und ergänzt habe.Übersetzt mit Unterstützung der Cloud- Plattform Mail.ru Cloud Solutions .Sie sind also ein React-Entwickler und haben beschlossen, Vue auszuprobieren. Lasst uns beginnen!React und Vue sind beide Coca-Cola und Pepsi. Vieles, was Sie mit React tun können, kann auch mit Vue erledigt werden. Gleichzeitig gibt es verschiedene Unterschiede, von denen einige die Auswirkungen des Angular-Frameworks auf Vue widerspiegeln.Dieser Artikel konzentriert sich auf Unterschiede, sodass Sie sofort in die Welt von Vue eintauchen und die Vorteile sehen können.Wie sehr unterscheiden sich React und Vue?
React und Vue haben mehr Ähnlichkeiten als Unterschiede:- Dies sind zwei Bibliotheken zum Erstellen einer Benutzeroberfläche.
- schnell und leicht;
- eine komponentenorientierte Architektur haben;
- Verwenden Sie den Virtual DOM-Ansatz.
- Beide können direkt in der HTML-Datei oder als Modul in einem komplexeren Build-System auf Webpack verbunden werden.
- Beide verfügen über separate, aber weit verbreitete Bibliotheken von Drittanbietern für das Routing und die Statusverwaltung.
Auffällige Unterschiede sind, dass Vue normalerweise HTML-Vorlagendateien verwendet und React nur JavaScript-Dateien verwendet. Die Vue-Bibliothek verfügt außerdem über einen veränderlichen Status und ein automatisches System zum erneuten Zeichnen von Vorlagen, das als Reaktivität bezeichnet wird.Komponenten
In der Vue-Bibliothek werden Komponenten mithilfe einer API-Methode verbunden .component, die ID-Argumente und ein Objekt mit Definitionsvariablen verwendet. Der React-Entwickler wird wahrscheinlich die bekannten und unbekannten Aspekte der Definition von Vue-Komponenten in diesem Code bemerken:Vue.component('my-component', {
props: [ 'myprop' ],
data() {
return {
firstName: 'John',
lastName: 'Smith'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
},
template: `
<div>
<p>Vue components typically have string templates.
<p>Here's some local state: {{ firstName }}
<p>Here's a computed value: {{ fullName }}
<p>Here's a prop passed down from the parent: {{ myprop }}
</div>
`,
created() {
setTimeout(() => {
this.message = 'Goodbye World'
}, 2000);
}
});
Vorlage
Wie Sie sehen können, verfügt die Komponente über eine Eigenschaft template, bei der es sich um eine Zeichenfolge mit HTML-Markup handelt. Die Vue-Bibliothek enthält einen Compiler, der diese Zeichenfolge zur Laufzeit in eine Renderfunktion umwandelt. Diese Rendering-Funktionen verwenden die Virtual DOM-Engine.Sie können die Eigenschaft nicht verwenden, templatewenn Sie stattdessen Ihre eigene Renderfunktion erstellen möchten. Sie können sogar JSX-Markups aus der React-Welt verwenden. Aber es wäre seltsam, zu Vue zu wechseln und es so zu machen - wie man nach Italien kommt und Pizza ablehnt ...Lebenszyklus-Haken
Vue-Komponenten haben ähnliche Lebenszyklusmethoden wie React-Komponenten. Der Hook createdaus dem obigen Beispiel beginnt beispielsweise, wenn der Status ( state) der Komponente bereit ist , jedoch bevor die Komponente an die Seite angehängt wird. Reagiere aus der Welt - getDerivedStateFromProps.Es gibt jedoch einen großen Unterschied: In der Vue-Bibliothek gibt es kein Analogon zur React-Bibliothek shouldComponentUpdate. Dies ist aufgrund des Vue-Reaktivitätssystems nicht erforderlich.Neuzeichnen von Komponenten
Einer der Schritte zum Initialisieren einer Komponente besteht darin, alle ihre Eigenschaften anzuzeigen und sie in Getter und Setter umzuwandeln. Wie Sie sehen können, hat die messageaus den Originaldaten ( props) entnommene Eigenschaft zwei zusätzliche Methoden erhalten - getund set:Vue fügt diese Funktionen hinzu, um die Abhängigkeitsverfolgung und Benachrichtigungen über Eigenschaftsänderungen zu aktivieren, wenn ein Programm sie liest oder ändert.Veränderlicher Zustand
Um den Status in Vue zu ändern, müssen Sie keine separate Methode aufrufen this.setState, wie dies in React der Fall ist. Sie schreiben die Änderungen einfach direkt:
this.setState({ message: 'Hello World' });
this.message = 'Hello World';
Wenn der Statuswert auf diese Weise geändert wird, wird die Methode setdieses Werts gestartet (siehe oben). Setschreibt einen neuen Wert, hat aber auch eine andere Aufgabe: Er benachrichtigt die Bibliothek, dass sich dieser Wert geändert hat, und der Teil des Layouts, der vom Wert dieser Variablen im Status abhängt, muss möglicherweise neu gezeichnet werden.Wenn die Variable messageals Eigenschaft ( prop) weiter in die untergeordneten Komponenten geworfen wird , merkt sich die Bibliothek dies und die untergeordneten Komponenten werden ebenfalls automatisch neu gezeichnet. Aus diesem Grund benötigt die Vue-Bibliothek keine ähnliche Lebenszyklusmethode wie die von React shouldComponentUpdate.Hauptvorlage
In Bezug auf die Hauptprojektvorlagendatei ähnelt Vue eher Angular. Wie in React muss die Vue-Vorlage irgendwo auf der Seite bereitgestellt werden:<body>
<div id="root"></div>
</body>
ReactDOM.render('...', document.getElementById('root'));
new Vue({
el: '#root'
});
Im Gegensatz zu React können Sie diesem Stammelement jedoch ein reguläres Layout hinzufügen. Wenn React beim Mounten der Komponente alles im Element löscht #root, speichert Vue:<div id="root">
<div>You can add more markup to index.html</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
Es gibt auch eine Möglichkeit, Vorlagen für untergeordnete Komponenten in der HTML-Stammdatei über HTML5-Erweiterungen wie x-template oder inline-template zu definieren. Dies wird nicht als bewährte Methode angesehen, da die Vorlage von der Definition der gesamten Komponente als Ganzes getrennt wird.Richtlinien
Wie in Angular können Sie mit Vue die Funktionen der Komponente mithilfe der Logik von "Direktiven" erweitern. Es gibt spezielle HTML-Attribute mit einem Präfix v-, z. B. v-ifzum Rendern mit Bedingungen oder v-bindzum Binden eines Ausdrucks an ein reguläres HTML-Attribut:new Vue({
el: '#app',
data: {
mybool: true,
myval: 'Hello World'
}
});
<div id="app">
<div v-if="mybool">This renders if mybool is truthy.</div>
<my-component v-bind:myprop="myval"></my-component>
</div>
Der der Direktive zugewiesene Wert ist ein JS-Ausdruck, sodass Sie auf Dateneigenschaften verweisen können, einschließlich der Verwendung ternärer Operatoren usw.Projektorganisation
Es gibt kein offizielles Äquivalent zur React-Create-App in der Vue-Bibliothek, es gibt jedoch einen Build der Vue-Entwickler-Community: create-vue-app.Die offizielle Empfehlung für den Start eines Projekts auf Vue lautet vue-cli. Es kann alles von einem einfachen Projekt mit einer HTML-Datei bis zu einem vollständig gepackten Webpack + Server-Side-Rendering-Projekt generieren:$ vue init template-name project-name
Projekte mit einer einzelnen HTML-Datei
Der Schöpfer von Vue.js, Ewan Yu (You Yu Xi), nannte sein Projekt „ein progressives Framework“, da es für komplexe Anwendungen skaliert oder für kleine Anwendungen vereinfacht werden kann.Natürlich kann React das auch. Der Unterschied besteht darin, dass Vue-Projekte normalerweise weniger ES6-Funktionen verwenden und nur selten JSX verwenden, sodass sie keinen Code mit Babel transponieren müssen. Außerdem passt die gesamte Vue-Bibliothek in eine Datei. Es gibt keine separaten Dateien für React-Entsprechungen wie ReactDOM.So fügen Sie einem Projekt mit einer einzigen HTML-Datei Vue hinzu:<script src="https://unpkg.com/vue/dist/vue.js"></script>
Wichtig! Wenn Sie keine Vorlagenzeichenfolgen verwenden und daher keinen Vorlagencompiler benötigen, verwenden Sie eine vereinfachte Version der Bibliothek, die diese Funktionen nicht bietet - vue.runtime.js. Es ist ungefähr 20 KB weniger als voll.Komponente in einer Datei
Wenn Sie das Glück haben, die Erstellungsphase Ihres Projekts mithilfe von Tools wie Webpack hinzuzufügen, können Sie die Einzeldateikomponenten von Vue (SFCs, Vue-Komponenten in einer einzelnen Datei) verwenden. Hierbei handelt es sich um Dateien mit der Erweiterung .vue, die die Komponentenvorlage, die JS-Konfiguration und die Stile in einer Datei zusammenfassen:<template>
<div class="my-class">{{ message }}</div>
</template>
<script>
export default {
data() {
message: 'Hello World'
}
}
</script>
<style>
.my-class { font-weight: bold; }
</style>
Dies ist ohne Zweifel eine der bemerkenswertesten Funktionen der Vue-Bibliothek, da Sie die richtige HTML-Vorlage erhalten, die JS-Logik jedoch direkt daneben und keine Trennkurve für Präsentation und Logik vorhanden ist.Es gibt einen Webpack-Loader namens Vue-Loader, der für die Erstellung von SFCs verantwortlich ist. Während des Assemblierungsprozesses wird die Vorlage in eine Renderfunktion konvertiert. Dies ist ideal für die Verwendung der abgespeckten Assembly vue.runtime.js im Browser.Redux und der Rest
Vue verfügt über eine Flux-basierte Statusverwaltungsbibliothek namens Vuex. Diesmal ist es ähnlich wie bei Redux, es gibt jedoch einige Unterschiede.Was bekommt der Entwickler beim Wechsel von React zu Vue?
Um das Problem vollständig zu verstehen, habe ich den Artikel ergänzt und erklärt, wann es besser ist, Reagieren zu wählen und wann Vue.Der Wechsel zu Vue dürfte neuen Personen den Einstieg in das Projekt erleichtern. Vue-Vorlagen können direkt in HTML geschrieben werden. Für kleine Projekte ist es außerdem nicht erforderlich, die neuesten ES ++ - Funktionen zu kennen und die Code-Assembly über Tools wie Webpack und Babel zu konfigurieren. Der Code für Vue kann im jQuery-Stil geschrieben werden, dh direkt in die Vorlage.Vue verfügt außerdem über ein praktisches System zur Zustellung von Statusnachrichten. Entwickler müssen sich nicht darum kümmern, eine asynchrone Methode setState( wie in React ) aufzurufen oder externe Bibliotheken zu verbinden, um die Statusbereitstellung zu steuern (z. B. Mobx ).Schließlich können mit Vue geschriebene Anwendungen deutlich leichter sein: Oft wird nur die Bibliothek selbst oder sogar die abgespeckte Version von vue.runtime.js benötigt. Während die moderne Entwicklung von React ohne Babel und sperrige Bündel mit einem Gewicht von bis zu mehreren Megabyte fast unmöglich ist.Vue-Projekte hingegen können zu komplex sein, wenn Sie eine große Anwendung oder eine komplexe Logik auf dem Client haben. Wenn das Layout in einer HTML-Vorlage erstellt wird, wird es schwieriger, Teile der Anwendung zu testen. React, das nur JS-Code verwendet, bietet weitere Funktionen zum Wiederverwenden und Erweitern von Code. Wenn Sie in React schreiben, können Sie Ihren Code beim Schreiben von Anwendungen für Geräte mit React-Native ohne großen Aufwand wiederverwenden. Dies ist bei Vue nicht der Fall.Daher kann die Schlussfolgerung wie folgt lauten:Mail.ru Cloud Solutions.