Eine kurze Diskussion über einige Vorteile von Vue3

Vue2 ist bereits sehr gut und verfügt über eine vollständige Community und ein vollständiges Ökosystem, aber Vue3 ist in drei wichtigen Aspekten noch optimiert: Quellcode, Leistung und Syntax-API.

1. Quellcode

1.1 Monorepo

Die Quellcodeverwaltungsmethode ist monorepo . monorepo teilt diese Module in verschiedene package auf, package jedes über eine eigene API, Typdefinition und Tests verfügt. Dadurch wird die Modulaufteilung detaillierter, die Aufgabenteilung klarer, die Abhängigkeiten zwischen Modulen deutlicher und es ist für Entwickler einfacher, alle Modulquellcodes zu lesen, zu verstehen und zu ändern, was die Wartbarkeit des Codes verbessert.

1.2 TypoScript

In der Vue2 Periode wurde flow gewählt. Da flow selbst einige funktionale Mängel aufweist und TS eine bessere Entwicklungsdynamik aufweist, entschied sich Vue3 für die Verwendung TS zum Schreiben von Code, was TS auch besser unterstützen und die Entwicklungserfahrung verbessern kann

2. Leistung

2.1 Quellcodegröße optimieren

Der Quellcodeumfang wurde vor allem unter zwei Gesichtspunkten optimiert:

Entfernen Sie einige unbeliebte APIs, wie z. filter , inline-template usw.

Durch die Reduzierung der API wird zwangsläufig die Codegröße reduziert, was sehr leicht zu verstehen ist

Einführung von tree-shaking zur Reduzierung der Bündelgröße

tree-shaking basiert auf der statischen Struktur der ES2015 Modulsyntax (d. h. import und export ). Durch statische Analyse während der Kompilierungsphase findet es Module, die nicht importiert wurden, und markiert sie. Diese Technologie ist in Verpackungstools wie webpack sehr beliebt geworden.

Anwendung in Vue3: Es ist unwahrscheinlich, dass wir alle von Vue bereitgestellten API verwenden. Es wird immer einige unbeliebte APIs geben, die in keinem einzigen Geschäftsszenario verwendet werden. Im Verpackungsprozess können diese von Benutzern nicht verwendeten API entfernt werden, um die Verpackungsgröße zu verringern.

2.3 Proxy

Vue2 verwendete zuvor Object.defineProperty für Datendiebstahl

Object.defineProperty(Quelle, Schlüssel, {
  erhalten(){
    // zu erledigen …
  },
  Satz(){
    // zu erledigen …
  }
})

Es hat einige Mängel

• Sie müssen im Voraus wissen, welcher key entwendet wird, und können das Hinzufügen und Löschen von Objekteigenschaften nicht sehr gut überwachen.
• Während der Initialisierung werden die gesamten data rekursiv durchlaufen, was bei tief verschachtelten Datenstrukturen zu einer Leistungsbelastung führt.
• Vue3 verwendet Proxy für Datenentführung, wodurch die durch Object.defineProperty verursachten Defekte wirksam vermieden werden können

p = neuer Proxy (Quelle, {
  erhalten() {
    // zu erledigen …
  },
  Satz() {
    // zu erledigen …
  }
})

2.4 Kompositions-API

Vue3 wurde hinsichtlich der Syntax optimiert und bietet vor allem Composition API als Ersatz für die ursprüngliche Options API

Options API bietet für jede Phase methods , computed , data , props und Life-Hook-Optionen. Entwickler können in jeder API entsprechende Dinge tun, wobei jede ihre eigenen Aufgaben erfüllt. Der Einstiegs- und Verständnisaufwand ist sehr gering und für unerfahrene Entwickler sehr benutzerfreundlich. Bei der Entwicklung kleiner Projekte sind die Lesbarkeit und Wartbarkeit des Codes ebenfalls beträchtlich. Bei großen Projekten oder komplexerer Geschäftslogik wird es jedoch sehr schwierig, den Code zu warten. Dies führt häufig dazu, dass man zu mehreren Stellen im Code springen muss, um eine Funktion zu ändern. Der Code einer Funktion ist an verschiedenen Stellen verstreut, wodurch der Lese- und Verständnisaufwand stark ansteigt. Composition API verfügt über einen guten Mechanismus zur Lösung dieses Problems, indem der gesamte Code, der sich auf ein bestimmtes logisches Anliegen bezieht, in einer Funktion zusammengefasst wird, sodass beim Ändern einer Funktion nicht in der Datei hin- und hergesprungen werden muss.

Damit ist dieser Artikel über die Vorteile von Vue3 abgeschlossen. Weitere Informationen zu den Vorteilen von Vue3 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!