Inhaltsverzeichnis
2. Bidirektionale MVVM-Datenbindung
Drittens, die Vorteile von Vue
7. Ansicht, Daten, Strukturtrennung
1. Was ist vue
Vue ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen
Vue ist eine js-Bibliothek und hängt nicht von anderen js-Bibliotheken ab. Sie kann direkt durch Importieren einer js-Datei verwendet werden. Im Gegensatz zu herkömmlichen JS- und JQuery- Frameworks bedeutet das progressive Framework von Vue , dass Entwickler mit einfachen Komponenten beginnen und nach und nach einen Komplex aufbauen können Front-End-Plattform.
Die Kernkonzepte, die das Vue Progressive Framework bilden, sind: Komponentenisierung , MVVM , Reaktionsfähigkeit und Lebenszyklus .
„Bei Vue dreht sich alles um Daten als Kernstück, die Verwendung von Daten zur Aktualisierung der Ansicht. Wir empfehlen nicht, dom zu betreiben.“
2. Warum Vue verwenden?
1. Komponentenisierung
Vue kombiniert HTML, CSS und JS , aus denen eine Seite besteht, in 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. Die Komponentenisierung ist eine gute Möglichkeit, ein riesiges und komplexes Front-End-Projekt in Komponenten aufzuteilen, und die Art der Wiederverwendung verbessert auch die Effizienz der Entwicklung erheblich.
<template>
<div class="demo">
<h2>学校名称：{
{name}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'bdqn',
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>2. Bidirektionale MVVM-Datenbindung
Das MVVM-Muster (vollständiger Name Model-View-ViewModel) implementiert die 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. beim Ausfüllen eines Formulars), wird die Änderung automatisch mit dem ViewModel synchronisiert, um die entsprechende Logik zu verarbeiten, und die Änderung wird in der Model-Datenbank aktualisiert.
Wenn sich umgekehrt die serverseitigen Daten ändern (z. B. Aktienkursschwankungen), 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.
Vor der Verwendung von Vue erforderte die Vervollständigung der Interaktion zwischen HTML und JS viele DOM-Operationen, um dynamisches Laden zu erreichen.
Die bidirektionale Datenbindung von MVVM reduziert DOM-Operationen und ermöglicht eine effizientere Interaktion zwischen Ansichten und Daten. Gleichzeitig trennt MVVM die Schnittstellen-, Interaktions- und Datenschicht, sodass Designer für das Design der Schnittstelle verantwortlich sind, Back-End-Entwickler Datenschnittstellen bereitstellen und Front-End-Entwickler sich auf die Realisierung der Geschäftsinteraktionslogik konzentrieren.
3. Responsives virtuelles DOM
Wenn bei DOM ein HTML-Element (z. B. div) auf Datenänderungen reagieren muss, wird die gesamte Seite aktualisiert, was zu besorgniserregender Effizienz führt.
Für das virtuelle DOM konvertiert der Browser die HTML-Datei in eine JS-Datei und kopiert eine zusätzliche zu verwendende (virtuelle) . Bei allen Änderungen vergleicht das virtuelle DOM das kopierte JS mit dem ursprünglichen JS, lädt nur die geänderten Teile neu und modifiziert sie lokal auf dem realen DOM.
In Vue hat jede an das Datenattribut gebundene Komponente einen Watcher, um Änderungen im Datenattribut zu erkennen. Sobald eine Änderung erkannt wird, wird die Komponente neu gerendert, was responsive ist.
4. Lebenszyklus
Schließlich hat jede Vue-Komponente einen Lebenszyklus, der Prozess ist Create -> Mount -> Update -> Destroy . Entwickler können zu verschiedenen Zeitpunkten im Komponentenlebenszyklus durch Hook-Funktionen (z. B. gemountet) arbeiten. Nachfolgend finden Sie ein vollständiges Diagramm des Vue-Lebenszyklus.
Drittens, die Vorteile von Vue
1. Leicht
Als leichtes Front-End-Framework ist Vue nur 18–21 KB groß, und die Projektkonstruktion ist einfach und erfordert nur wenige Befehlszeilen. Da die von Vue verwendete Hauptsprache JS ist, können Entwickler Projekte flexibel von anderen Frameworks (wie React und Angular) zu Vue migrieren, das über hohe Integrationsfähigkeiten verfügt. Die von Vue bereitgestellte Router-Route kann problemlos eine Anwendung mit mehreren Schnittstellen erstellen.
2. Hohe Leistung
Virtuelles DOM und Reaktionsfähigkeit vermeiden unnötiges globales Re-Rendering, verbessern die Benutzererfahrung und machen Benutzervorgänge reibungsloser.
3. Einfach zu bedienen
Ähnlich wie bei der objektorientierten Programmierung entspricht die Komponentenisierung eher dem menschlichen Denken. Wenn wir beispielsweise eine Webseite entwerfen, unterteilen wir normalerweise eine Benutzeroberfläche in bestimmte Stilmodule für eine bestimmte Funktion. Die Komponentenisierung von Vue macht die Frontend-Entwicklung verständlicher, und MVVM kann die Interaktion bequemer realisieren, was für Anfänger sehr freundlich ist.
4. Plugin
Aufgrund der Popularität des Vue-Frameworks gibt es derzeit viele Vue-basierte npm-Erweiterungspakete und Entwicklungstools (z. B. Vuex). Vue kann die globale Nutzung aller externen Plugins einheitlich unter einer Datei verwalten.
5. Einfaches Testen
Die Komponentenisierung ist für Entwickler von Vorteil, um eine einzelne Komponente zu testen, und es ist selten, dass ein Fehler unter der gesamten Seite gemeldet wird.
6. Schneller laufen
Im Vergleich zu React betreibt es auch Virtual Dom. Hinsichtlich der Performance hat vue große Vorteile
7. Ansicht, Daten, Strukturtrennung
Erleichtern Sie Datenänderungen, müssen Sie den Logikcode nicht ändern, müssen Sie nur die Daten bearbeiten, um die relevanten Vorgänge abzuschließen