Hinweise zu Vue.js und MVVM

MVVM ist die Abkürzung für Model-View-ViewModel. Es handelt sich um ein Architekturmuster, das auf der Front-End-Entwicklung basiert. Sein Kern besteht darin, eine bidirektionale Datenbindung von View und View Model bereitzustellen, die die Zustandsänderungen von View Model ermöglicht automatisch an View übergeben werden soll, wird dies als bidirektionale Datenbindung bezeichnet.

Vue.js ist eine Javascript-Bibliothek, die eine bidirektionale Datenbindung im MVVM-Stil bietet und sich dabei auf die Ansichtsebene konzentriert. Sein Kern ist die VM in MVVM, nämlich ViewModel. ViewModel ist für die Verbindung von View und Model verantwortlich, um die Konsistenz von Ansicht und Daten sicherzustellen. Diese schlanke Architektur macht die Front-End-Entwicklung effizienter und komfortabler.

Warum erscheint MVVM?

Ich kam 2015 mit MVVM in Kontakt. Man kann sagen, dass 2015 das heißeste Jahr für MVVM war. Davor wusste ich nur, dass MVC vor etwa 5 Jahren, also im Jahr 2011, eingeführt wurde Als ich jung war, lernte ich gerade Programmiersprachen und das klassische SSH-Framework in Java, um eine Standard-MVC-Architektur zu erstellen. Um ehrlich zu sein, habe ich die MVC-Architektur schon seit so vielen Jahren verwendet, aber ich habe nie ein tiefes Verständnis davon gehabt, bis ich mit Vue.js in Berührung gekommen bin Die MVVM-Architekturideen, und als ich dann auf MVC zurückblickte, wurde mir plötzlich klar, dass MVC die Abkürzung für Model-View-Controller ist, was mit anderen Worten „a“ bedeutet Eine Standard-Webanwendung besteht aus diesen drei Teilen:

Ansicht wird verwendet, um dem Benutzer auf irgendeine Weise Daten zu präsentieren

Modell sind eigentlich Daten

Controller empfängt und verarbeitet Anfragen von Benutzer und gibt das Modell an den Benutzer zurück

in den Jahren, bevor HTML5 populär wurde, galt MVC als beste Methode für Webanwendungen. Dies liegt daran, dass die Ansichtsebene von Webanwendungen relativ einfach ist und die Daten Die vom Front-End benötigte Ansichtsschicht dient hauptsächlich der Anzeige. Damals wurde der Controller für die Verarbeitung komplexer Geschäftslogiken empfohlen, sodass die Ansichtsschicht relativ leichtgewichtig war Thin-Client-Idee.

Von 2010 bis 2011 war das Konzept von HTML5 ein Hype und begehrt. Im Jahr 2012 gab das W3C offiziell bekannt, dass die HTML5-Spezifikation offiziell fertiggestellt wurde. Als ich 2013 zum ersten Mal in das Unternehmen eintrat, kam ich mit Sench Touch in Kontakt, einem HTML5-Framework, das zum Erstellen mobiler Anwendungen verwendet wird. Das Frontend nutzt die MVC-Architektur und wird als eigenständiges Projekt gepflegt.

Warum muss das Frontend entwickelt werden und MVC verwenden?

Im Vergleich zu HTML4 besteht der größte Vorteil von HTML5 darin, dass es einige sehr nützliche Funktionen für mobile Geräte bietet, wodurch HTML5 in der Lage ist, Apps zu entwickeln. Die größten Vorteile der Entwicklung von Apps mit HTML5 sind plattformübergreifende, schnelle Iteration und Um Arbeitskosten zu sparen und die Übermittlungseffizienz zu steigern, begannen viele Unternehmen, herkömmliche Apps umzuwandeln und ersetzten nach und nach native Seiten durch H5. Bis 2015 verfügten viele Apps auf dem Markt über mehr oder weniger eingebettete H5-Seiten.

Da H5 zum Erstellen der App verwendet wird, muss die Ansichtsschicht nicht nur Daten verwalten, verschiedene Zustände von Benutzervorgängen verwalten und auch verschiedene Benutzerbetriebsverhalten verwalten. usw. Daher benötigt das Frontend auch ein MVC-ähnliches Framework, um diese komplexen Logiken zu verwalten und die Entwicklung effizienter zu gestalten. Zu diesem Zeitpunkt hat sich MVC jedoch geringfügig geändert:

UI-Layout anzeigen, Daten anzeigen

Modell verwaltet Daten

Controller reagiert auf Benutzervorgänge und aktualisiert das Modell auf Ansicht

Dieses MVC-Architekturmuster scheint für Basisanwendungen in Ordnung zu sein und steht auch im Einklang mit der mehrschichtigen Idee der Softwarearchitektur. Tatsächlich hoffen die Menschen mit der kontinuierlichen Weiterentwicklung von H5, dass mit H5 entwickelte Anwendungen mit Native vergleichbar sein können oder der nativen App-Erfahrung nahekommen. Daher ist die Komplexität von Front-End-Anwendungen nicht mehr das, was sie einmal war. Zu diesem Zeitpunkt hat das Frontend drei wichtige Schwachstellen aufgedeckt:

1 Entwickler rufen eine große Anzahl derselben DOM-APIs im Code auf, was die Verarbeitung umständlich und redundant macht und die Wartung des Codes erschwert.

2. Eine große Anzahl von DOM-Vorgängen verringert die Leistung beim Rendern der Seite und verlangsamt die Ladegeschwindigkeit, was sich auf das Benutzererlebnis auswirkt.

3. Wenn sich das Modell häufig ändert, müssen Entwickler die Ansicht aktiv aktualisieren. Wenn sich das Modell durch Benutzervorgänge ändert, müssen Entwickler auch die geänderten Daten mit dem Modell synchronisieren Ist es umständlich, aber es ist auch schwierig, den Status komplexer und sich ändernder Daten aufrechtzuerhalten?

Tatsächlich bestand das frühe Aufkommen von JQuery darin, dass das Front-End das DOM präziser bedienen konnte, aber es löste nur das erste Problem, und die nächsten beiden Probleme existierten immer mit dem Front-End.

Das Aufkommen von MVVM löst die oben genannten drei Probleme perfekt.

MVVM besteht aus drei Teilen: Modell, Ansicht und Ansichtsmodell. Die Modellschicht stellt das Datenmodell dar, und die Geschäftslogik für Datenänderung und -betrieb kann auch in der Ansicht definiert werden, die die UI-Komponente darstellt. welches für die Konvertierung des Datenmodells in die Benutzeroberfläche verantwortlich ist. Wie gezeigt, ist ViewModel ein Objekt, das Ansicht und Modell synchronisiert.

Unter der MVVM-Architektur gibt es keine direkte Verbindung zwischen View und Model. Stattdessen interagieren sie über ViewModel. Die Interaktion zwischen Model und ViewModel erfolgt in beide Richtungen, sodass Änderungen in View-Daten mit dem Modell synchronisiert werden . und Änderungen an den Modelldaten werden sofort in der Ansicht widergespiegelt.

ViewModel verbindet die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung, und die Synchronisierung zwischen Ansicht und Modell erfolgt vollständig automatisch ohne menschliches Eingreifen, sodass sich Entwickler nur auf die Geschäftslogik konzentrieren müssen und keine manuellen Vorgänge benötigen Auf die Synchronisierung des Datenstatus muss nicht geachtet werden. Die Verwaltung des komplexen Datenstatus wird vollständig von MVVM verwaltet.

Details zu Vue.js

Vue.js kann als die beste Praxis der MVVM-Architektur bezeichnet werden. Es konzentriert sich nicht nur auf die bidirektionale Datenbindung. Vergleichen wir aber auch die leichtgewichtigen JS-Bibliotheken. Die API ist einfach und benutzerfreundlich. Es gibt vorgefertigte Tutorials zu den Grundkenntnissen von Vue, daher werde ich hier nicht auf Details eingehen. Werfen wir einen kurzen Blick auf einige Implementierungsdetails der bidirektionalen Bindung in Vue.js:

Vue. js verwendet den Getter und Getter des Object.defineProperty-Setters in Kombination mit dem Beobachtermuster, um die Datenbindung zu implementieren. Wenn Sie ein einfaches Javascript-Objekt als Datenoption an eine Vue-Instanz übergeben, durchläuft Vue seine Eigenschaften und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter. Die Getter/Setter sind für den Benutzer nicht sichtbar, aber intern ermöglichen sie Vue, Abhängigkeiten zu verfolgen und Änderungen zu benachrichtigen, wenn auf Eigenschaften zugegriffen und diese geändert werden.

Beobachterdaten-Listener, der alle Eigenschaften des Datenobjekts überwachen kann, den neuesten Wert abrufen und Abonnenten benachrichtigen kann Object.defineProperty intern. und Setter zum Implementieren des

Compile-Anweisungsparsers. Seine Funktion besteht darin, die Anweisungen jedes Elementknotens zu scannen und zu analysieren, die Daten gemäß der Anweisungsvorlage zu ersetzen und die entsprechende Aktualisierungsfunktion zu binden 🎜>

Watcher-Abonnent kann als Brücke, die Observer und Compile verbindet, Benachrichtigungen über jede Attributänderung abonnieren und empfangen und die entsprechende Rückruffunktion ausführen, die an die Anweisung

Dep-Nachrichtenabonnent gebunden ist, die ein Array verwaltet Intern lösen Datenänderungen für Collect-Abonnenten (Watcher) die Benachrichtigungsfunktion aus und rufen dann die Aktualisierungsmethode des Abonnenten auf.

Wenn new Vue() ausgeführt wird, tritt Vue einerseits in die Initialisierungsphase ein Durchläuft die Datenoptionen und konvertiert sie mithilfe von Object.defineProperty in Getter/Setter, um Funktionen zur Überwachung von Datenänderungen zu implementieren Abonniert Watcher, um die Ansicht zu aktualisieren. Zu diesem Zeitpunkt fügt sich Wather zum Nachrichtenabonnenten (dep) hinzu und die Initialisierung ist abgeschlossen.

Wenn sich die Daten ändern, wird die Setter-Methode im Observer ausgelöst. Der Setter beginnt sofort mit dem Durchlaufen aller Abonnenten und ruft die Update-Methode des Abonnenten auf Wenn Sie eine Benachrichtigung erhalten, wird die Ansicht entsprechend aktualisiert und eine Datenbindung wird abgeschlossen.