Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen

Als eines der beliebtesten Front-End-Frameworks ist Vue für viele Front-End-Entwicklungsingenieure die erste Wahl. Vor Kurzem habe ich Vue auch verwendet, um mehrere Produkte im Front-End-Bereich zu implementieren. Heute werde ich daher mitteilen, was Vue ist und welche Erkenntnisse ich zu Vue habe.

I. Definition

Vue ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen.

Im Gegensatz zu herkömmlichen JS- und JQuery-Frameworks ermöglicht das progressive Framework von Vue Entwicklern, mit einfachen Komponenten zu beginnen und schrittweise eine komplexe Front-End-Plattform aufzubauen.
Die Kernkonzepte, die das progressive Vue-Framework bilden, sind: Komponentenbildung , MVVM , Reaktionsfähigkeit und Lebenszyklus , die im Folgenden ausführlich vorgestellt werden.

2. Warum Vue verwenden?

1. Komponentenbildung

Vue kombiniert das HTML, CSS und JS , aus denen eine Seite besteht, zu einer Komponente , die von anderen Komponenten oder Seiten eingeführt und wiederverwendet werden kann. Normalerweise wird jede .Vue-Datei als Komponente exportiert, die eine Basiskomponente (z. B. eine Schaltfläche) oder eine Seite (z. B. eine Anmeldeseite) sein kann. Durch die Komponentenbildung kann ein großes und komplexes Front-End-Projekt effektiv in einzelne Komponenten aufgeteilt werden und durch die Wiederverwendbarkeit wird auch die Entwicklungseffizienz erheblich verbessert.

2. Zweiwegebindung von MVVM-Daten

Der MVVM-Modus (vollständiger Name: Model-View-ViewModel) implementiert eine bidirektionale Datenbindung für Vue. In MVVM ist View die Ansichtsebene, ViewModel die Geschäftslogikebene und Model die Datenebene.

Was ist bidirektionale Datenbindung? Wenn der Benutzer die Ansicht ändert (z. B. durch Ausfüllen eines Formulars), werden die Änderungen automatisch mit dem ViewModel synchronisiert, um die entsprechende Logik zu verarbeiten und die Änderungen in der Modelldatenbank zu aktualisieren. Im Gegenteil, wenn sich die serverseitigen Daten ändern (z. B. Schwankungen des Aktienkurses), werden die Änderungen automatisch mit dem ViewModel synchronisiert, um die entsprechende Logik zu verarbeiten, und die Änderungen werden mit der Ansicht synchronisiert, um sie dem Benutzer anzuzeigen.

Bevor ich Vue verwendet habe, musste ich viele DOM-Operationen verwenden, um dynamisches Laden zu erreichen und die Interaktion zwischen HTML und JS abzuschließen. Die bidirektionale Datenbindung von MVVM reduziert DOM-Operationen und implementiert die Interaktion zwischen Ansichten und Daten effizienter. Gleichzeitig trennt MVVM die Schnittstellen-, Interaktions- und Datenebenen, sodass Designer die Schnittstelle einfacher gestalten können, Back-End-Entwickler Datenschnittstellen bereitstellen können und Front-End-Entwickler sich auf die Implementierung der Geschäftsinteraktionslogik konzentrieren können.

3. Reaktionsfähiger virtueller DOM

Wenn bei DOM ein HTML-Element (z. B. div) auf Datenänderungen reagieren muss, wird die gesamte Seite aktualisiert, was zu einer beeinträchtigten Effizienz führt. Beim Virtual DOM wandelt der Browser die HTML-Datei in eine JS-Datei um und kopiert sie in eine weitere (virtuelle) Verwendung. Bei allen Änderungen vergleicht das virtuelle DOM das kopierte JS mit dem Original-JS und lädt nur die geänderten Teile neu , indem es sie lokal im realen DOM ändert.

In Vue verfügt jede Komponente, die an ein Datenattribut gebunden ist, über einen Watcher , um Änderungen im Datenattribut zu erkennen. Sobald eine Änderung erkannt wird, wird die Komponente neu gerendert und ist reaktionsfähig .

4. Lebenszyklus

Schließlich hat jede Vue-Komponente einen Lebenszyklus; der Prozess ist Erstellen -> Mounten -> Aktualisieren -> Zerstören . Entwickler können Hook-Funktionen (z. B. „Mounted“) verwenden, um Vorgänge zu verschiedenen Zeiten im Lebenszyklus einer Komponente auszuführen. Unten finden Sie ein vollständiges Diagramm des Vue-Lebenszyklus.

3. Vor- und Nachteile von Vue

Nachdem wir über mehrere Kernkonzepte von Vue gesprochen haben, fassen wir die Vor- und Nachteile der Verwendung des Vue-Frameworks für die Front-End-Entwicklung zusammen:

Vorteil

1. Leichtgewicht

Als leichtes Frontend-Framework ist Vue nur 18-21 KB groß. Das Projekt ist einfach zu erstellen und erfordert nur wenige Befehlszeilen. Da die von Vue hauptsächlich verwendete Sprache JS ist, können Entwickler Projekte flexibel von anderen Frameworks (wie React und Angular) zu Vue migrieren, das über hohe Integrationsfunktionen verfügt. Mit dem von Vue bereitgestellten Router können Sie problemlos Anwendungen mit mehreren Schnittstellen erstellen.

2. Hohe Leistung

Virtueller DOM und Reaktionsfähigkeit vermeiden unnötiges erneutes globales Rendern, verbessern das Benutzererlebnis und sorgen für reibungslosere Benutzervorgänge.

3. Einfach zu bedienen

Ähnlich wie bei der objektorientierten Programmierung entspricht die Komponentenbildung eher dem menschlichen Denken . Wenn wir beispielsweise eine Webseite entwerfen, unterteilen wir eine Benutzeroberfläche normalerweise in Teile spezifischer Stilmodule, die für bestimmte Funktionen verwendet werden. Durch die Komponentenbildung in Vue ist die Front-End-Entwicklung leichter verständlich und mit MVVM ist die Interaktion bequemer realisierbar, was für Anfänger sehr benutzerfreundlich ist.

4. Plugin

Aufgrund der Popularität des Vue-Frameworks gibt es derzeit viele auf Vue basierende npm-Erweiterungspakete und Entwicklungstools (wie Vuex). Vue kann die globale Verwendung aller externen Plug-Ins in einer Datei verwalten .

5. Einfach zu testen

Durch die Komponentenbildung können Entwickler eine einzelne Komponente testen und nur selten finden, wo auf der gesamten Seite ein Fehler auftritt.

Mangel

1. Die ökologische Umgebung ist nicht perfekt

Obwohl Vue seit fünf Jahren entwickelt wird, ist seine ökologische Umgebung nicht so standardisiert wie React und Angular. Die Diskussions- Community zur Vue-Entwicklung ist relativ klein .

2. Kleiner Überseemarkt

Vue wurde vom chinesischen Unternehmen You Da Shen entwickelt und wird hauptsächlich von großen inländischen Unternehmen wie Alibaba und Ele.me als Mainstream-Framework verwendet, während die meisten ausländischen Unternehmen React und Angular verwenden.

Oben wird eine ausführliche Diskussion über einfache Einführungskenntnisse zu Vue gegeben. Weitere Informationen zum Einstieg in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!