So vergleichen und analysieren Sie die drei gängigen Web-Front-End-Frameworks

Der Vergleich ist wie folgt: 1. Vue, die bereitgestellten APIs sind relativ einfach und intuitiv und verwenden DOM-Vorlagen. 2. Angular basiert auf einer schmutzigen Überprüfung der Daten. Je mehr Watcher, desto langsamer Syntax führt die Verwendung von Virtual DOM Dirty Checks für die gerenderten Ergebnisse durch.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

MVX-Framework-Muster: MVC+MVP+MVVM

1.MVC: Modell+Ansicht+Controller, hauptsächlich basierend auf dem Zweck der Schichtung, um die Verantwortlichkeiten voneinander zu trennen.

View kommuniziert mit Model über Controller. View und Model sind nicht direkt miteinander verbunden, und die grundlegende Kommunikation erfolgt in eine Richtung.

Der Benutzer bedient das Vorlagenmodell über den Controller, um Änderungen in der Ansicht zu erzielen.

2. MVP: Es ist eine Weiterentwicklung des MVC-Modells. Es verwendet Controller/Presenter zur Verwaltung der Logik + Modell zur Bereitstellung von Daten + Ansicht zur Anzeige.

In MVP trennt Presenter Ansicht und Modell vollständig und die Hauptprogrammlogik ist in Presenter implementiert.

Darüber hinaus stehen Presenter und View nicht in direktem Zusammenhang. Sie interagieren über eine definierte Schnittstelle, sodass der Presenter unverändert bleiben kann, wenn die View geändert wird.

MVP-Modell-Framework: Riot, js.

3.MVVM: MVVM ändert den Controller in MVC und den Presenter in MVP zu ViewModel. Modell+Ansicht+Ansichtsmodell.

Änderungen in der Ansicht werden automatisch im Modell aktualisiert, und Änderungen im Modell werden zur Anzeige auch automatisch mit der Ansicht synchronisiert.

Diese automatische Synchronisierung ist darauf zurückzuführen, dass die Eigenschaften in ViewModel Observer implementieren und entsprechende Vorgänge ausgelöst werden können, wenn sich Eigenschaften ändern.

Was ist Vue.js?

Wenn wir uns die Einführung des Framework-Musters oben ansehen, können wir erkennen, dass es sich um ein Framework handelt, das zum MVVM-Muster gehört. Was sind also seine Eigenschaften?

Tatsächlich ist Vue.js kein Framework, da es sich nur auf die Ansichtsebene konzentriert und eine Bibliothek zum Erstellen datengesteuerter Webschnittstellen ist.

Vue.js bietet eine effiziente Datenbindung und ein flexibles Komponentensystem über eine einfache API (Application Programming Interface).

Die Funktionen von Vue.js sind wie folgt:

2. Zwei-Wege-Datenbindung

4. Was ist der Unterschied zwischen Vue.js und andere Frameworks?

1. Unterschiede

Ähnlichkeiten mit AngularJS:

Beide Support-Anweisungen: integrierte Anweisungen und benutzerdefinierte Anweisungen.

Beide unterstützen Filter: integrierte Filter und benutzerdefinierte Filter.

Beide unterstützen die bidirektionale Datenbindung.

Unterstützt keine Low-End-Browser.

Unterschiede:

1. AngularJS hat einen hohen Lernaufwand, wie zum Beispiel die Hinzufügung der Dependency-Injection-Funktion, während die von Vue.js selbst bereitgestellten APIs relativ einfach und intuitiv sind.

2. In Bezug auf die Leistung ist AngularJS auf eine schmutzige Überprüfung der Daten angewiesen. Je mehr Beobachter es gibt, desto langsamer wird es.

Vue.js verwendet eine auf Abhängigkeitsverfolgung basierende Beobachtung und asynchrone Warteschlangenaktualisierungen. Alle Daten werden unabhängig voneinander ausgelöst.

Bei großen Anwendungen ist dieser Optimierungsunterschied ziemlich offensichtlich.

2. Unterschiede zu React .

Die Grundidee ist dieselbe: Alles ist eine Komponente und Komponenteninstanzen können verschachtelt werden.

Alle bieten angemessene Hook-Funktionen, sodass Entwickler ihre Anforderungen anpassen können.

Es gibt keine integrierten AJAX-, Route- und anderen Funktionen im Kernpaket, sondern werden als Plug-Ins geladen.

Unterstützt die Funktionen von Mixins in der Komponentenentwicklung.

Unterschied:

React setzt auf Virtual DOM, während Vue.js DOM-Vorlagen verwendet. Das von React verwendete virtuelle DOM führt Dirty-Checks für die gerenderten Ergebnisse durch.

Vue.js bietet in der Vorlage Anweisungen, Filter usw., mit denen das DOM sehr bequem und schnell bedient werden kann.

【Empfohlenes Lernen:

Javascript-Tutorial für Fortgeschrittene

】

Das obige ist der detaillierte Inhalt vonSo vergleichen und analysieren Sie die drei gängigen Web-Front-End-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!