Einführung in das klassische und benutzerfreundliche JavaScript-Framework Vue.js

Ziel dieses Artikels ist es, ein nützliches JavaScript-Framework Vue.js vorzustellen, damit die Leser ein erstes Verständnis davon erhalten.

Vue (ausgesprochen /vjuː/, ähnlich wie view) 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. Andererseits ist Vue in Kombination mit einer modernen Toolkette und verschiedenen unterstützenden Bibliotheken durchaus in der Lage, Treiber für komplexe Single-Page-Anwendungen bereitzustellen.

Funktionen von Vue – Berechnete Eigenschaften

Das Schreiben von Ausdrücken in Vue-Vorlagen ist sehr praktisch, aber wenn Sie komplexe Logik darin einfügen, wird die Vorlage sperrig und schwer zu warten. Für komplexe Logik stellt Vue berechnete Eigenschaften zur Verfügung.

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Dies ist ein einfaches Beispiel einer berechneten Eigenschaft, die Folgendes ausgibt:

Original message: "Hello"
Computed reversed message: "olleH"

Hier wird eine berechnete Eigenschaft „reversedMessage“ deklariert, und die Funktion, die wir in „computered“ bereitstellen, wird als Wert der Eigenschaft „vm.reversedMessage“ verwendet. Und wenn sich vm.message ändert, ändert sich auch vm.reversedMessage entsprechend, und wenn es andere damit verbundene Eigenschaften gibt, ändert es sich auch entsprechend.

Eigentlich ist dies der Methode sehr ähnlich. Wir können die Methode verwenden, um den gleichen Effekt zu erzielen, ähnlich wie hier

<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage（） }}"</p>
</div>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})

Sie können das gleiche Ergebnis wie folgt erhalten, aber der Unterschied zur berechneten Eigenschaft besteht darin, dass die berechnete Eigenschaft die Funktion nicht ausführt, solange sich die Nachricht nicht ändert, sondern direkt das vorherige Ergebnis zurückgibt, solange die Methode benötigt wird um die Funktion wiederholt auszuführen. Verwenden Sie Methoden, wenn Sie kein Caching benötigen.

Beantworten wir zunächst eine Frage: Was ist Vuex?

Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert. Vuex ist auch in die offizielle Erweiterung des Debugging-Tools devtools von Vue integriert und bietet erweiterte Debugging-Funktionen wie Zeitreise-Debugging ohne Konfiguration, Import und Export von Status-Snapshots usw.

Extrahieren Sie den gemeinsamen Status der Komponente und verwalten Sie ihn in einem globalen Singleton-Modus. In diesem Modus bildet unser Komponentenbaum eine riesige „Ansicht“. Unabhängig davon, wo sie sich im Baum befindet, kann jede Komponente einen Status erhalten oder ein Verhalten auslösen

Darüber hinaus wird unser Code durch die Definition verschiedener Konzepte für die Isolationszustandsverwaltung und die Durchsetzung bestimmter Regeln strukturierter und einfacher zu warten.

Diese Idee 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.

Obwohl Vuex uns bei der Verwaltung des gemeinsamen Zustands helfen kann, verfügt es auch über weitere Konzepte und Frameworks. Dies erfordert eine Abwägung zwischen kurz- und langfristigen Vorteilen.

Wenn Sie nicht vorhaben, eine große einseitige Anwendung zu entwickeln, kann die Verwendung von Vuex umständlich und überflüssig sein. Es stimmt – wenn Ihre Anwendung einfach genug ist, ist es besser, Vuex nicht zu verwenden. Ein einfacher globaler Eventbus reicht aus. Wenn Sie jedoch eine mittelgroße bis große Single-Page-Anwendung erstellen müssen, werden Sie wahrscheinlich darüber nachdenken, wie Sie den Zustand außerhalb der Komponente besser verwalten können, und Vuex wird eine natürliche Wahl sein.

Nehmen wir als Vergleichsbeispiel React. Zunächst einmal weisen beide viele Gemeinsamkeiten auf:

Virtuelles DOM verwenden
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.

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

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.

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. In React basieren alle Komponenten-Rendering-Funktionen auf JSX. JSX ist ein Tool zum Schreiben von JavaScript mithilfe der XML-Syntax.

Die ganze Idee von Vue besteht darin, klassische Webtechnologien zu übernehmen und sie zu erweitern. Tatsächlich bietet Vue auch Rendering-Funktionen und unterstützt sogar JSX. Unsere Standardempfehlung sind jedoch Vorlagen. Jeder gültige HTML-Code ist eine gültige Vue-Vorlage. Für viele Entwickler, die an HTML gewöhnt sind, sind Vorlagen natürlicher zu lesen und zu schreiben als JSX. 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.

Sowohl Vue als auch React bieten 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 (Vuex) noch einen Schritt weiter entwickelt und die Zustandsverwaltungslösung Vuex von Vue tiefer integriert. Ich glaube, dass es Ihnen 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.

Es gibt noch weitere Unterschiede zwischen React und Vue, auf die ich hier nicht näher eingehen werde. Natürlich kann die Auswahl vom Benutzer abhängen. Was wir derzeit tun, sind nur ein paar Vorschläge zur Vereinfachung. Benutzer haben ein besseres Verständnis für Vue und wie es sich von anderen Plug-ins unterscheidet.

Das obige ist der detaillierte Inhalt vonEinführung in das klassische und benutzerfreundliche JavaScript-Framework Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!