Vue 3 wird schneller

Eines der auffälligsten Ereignisse in der Welt des Frontends in diesem Jahr war die Veröffentlichung des Vue Next Repository - Teil der Funktionalität der dritten Version von VueJS. Dieser Artikel bietet einen Überblick über die neuen Killerfunktionen von VueJS. Zum Zeitpunkt der Veröffentlichung des Artikels befand sich das Repository im Pre-Alpha- Status. Release-Pläne können auf der Roadmap eingesehen werden

Hintergrund

Im Februar 2018 teilte Evan You, der Schöpfer von Vue.js, seine Pläne für Version 3 des populären Frameworks mit:

• Teilen Sie die Funktionalität in Pakete auf, um den Bereich zu isolieren
• TypeScript wird in der Codebasis angezeigt
• Vue 3 ist abwärtskompatibel mit der 2. Version (d. H. Der alte Code wird nicht beschädigt)
• Beobachter in Version 3.0 basieren auf Proxy, wodurch die Object.defineProperty erhöht und eine Reihe von Einschränkungen Object.defineProperty , die von Object.defineProperty auferlegt werden
• Sie können mit den neuen renderTracked und renderTriggered
• Dank der Einführung von Tree Shaking (ohne nicht verwendete Direktiven aus dem Build) wird die Größe des Frameworks in komprimierter Form weniger als 10 KB betragen
• Slot-Optimierung
• Leistung in Version 3 wird sich um 100% verbessern

Features wie integrierte Komponenten und Direktiven-Laufzeit-Helfer (V-Modell) werden jetzt bei Bedarf importiert und können in einem Baum verwandelt werden
Evan du

Der Compiler wird das Vorhandensein von Direktiven verfolgen und diese in der Kompilierungsphase in den Build einbeziehen.

Während der Arbeit an Vue 3 weigerte sich Evan, Komponenten in Klassen umzuschreiben, und implementierte stattdessen eine funktionierende API.

Da die neue Version Proxys verwendet, die im IE nicht unterstützt werden, plant Evan, einen separaten Build für IE11 zu erstellen. Insgesamt versprechen 4 Phasen:

1. Alpha Phase - Phase der Finalisierung des Compilers und des SSR-Renderings
2. Beta Phase - Phase der Finalisierung der Hauptbibliotheken (Vue Router, Vuex, Vue CLI, Vue DevTools)
3. RC-Phase - Vorabversion einschließlich Vue 2.0
4. IE11 bauen
5. Endgültige Veröffentlichung

Evan hat eine endgültige Veröffentlichung für 2019 geplant, aber das Projekt befindet sich noch in der Pre-Alpha-Phase.

Vue 3 wird schneller sein

Dank einer Reihe von Innovationen wird Vue 3 doppelt so schnell wie die Vorgängerversion.

Proxy-basierte Beobachtung und Reaktivität

Eine der wichtigsten Neuerungen war die Änderung des Mechanismus zum Überwachen von Objekten von Gettern und Setzern von Object.defineProperty zu Proxy. Jetzt kann Vue das Entfernen und Hinzufügen von Eigenschaften reaktiver Objekte verfolgen, ohne Vue.set und Vue.delete zu verwenden. Die Innovation beschleunigte das Rendern und Skripten und reduzierte den Speicherverbrauch um das Zweifache! Sie können die Leistung von Vue 2 und Vue 3 vergleichen, indem Sie das Repository von Ilya Klimov herunterladen

Leistungsvergleich von Vue 2 (links) und Vue 3 (Pre-Alpha-Stadium, rechts)


Dank Proxys geht die Reaktivität nicht verloren, wenn Objektmanipulationen geändert werden, die in Vue 2 nicht verfolgt werden. Jetzt durchläuft Vue die Eigenschaften eines Objekts nicht mehr rekursiv, um die Änderungen zu berechnen.

Was wird aus den Versprechungen gemacht:

• Nachkommen und Eltern werden unabhängig voneinander neu gezeichnet
• Die Größe von Vue 3 wurde in komprimierter Form von 20 KB auf 10 KB verringert
• TypeScript hinzugefügt

Andere Optimierungen:

• In Vue 3 werden statische Inhalte gespeichert und nur dynamische Daten gepatcht
• Statische Requisiten erweitern den Anwendungsbereich
• Zur Vereinfachung der Entwicklung ist Vue 3-Code in modulare Pakete unterteilt.
• Das Laufzeit-Kernpaket ist plattformübergreifend aufgebaut
• Anstelle von Klassen fügte Evan eine Setup-Funktion und Hooks hinzu, die den Code sauber, organisiert und wiederverwendbar machen. *
• Time Slicing *. Die Ausführung von JS-Code wird in Teile zerlegt, ohne die Benutzerinteraktion mit der Anwendung zu blockieren

Sternchen kennzeichnen die experimentelle API .
Update: Später entschied sich Evan, die Zeitverschiebung aufzugeben .

Inspiriert vom HOC implementierte Reacta Evan Setup-Funktionen mit wiederverwendbarer Logik und benutzerdefinierten Hooks. Im Gegensatz zu Mixins überschreiben sich Lifecycle-Hooks nicht gegenseitig.

Verbesserter VDom Patch

Statischer Inhalt Joystick



Statischer Inhalt wird beim Kompilieren der Vorlage aus dem VDom-Patch verschoben. Vue wurde von Svelte dazu inspiriert:

 <div>Hello, {{name}}</div> 

Hier werden das geänderte Objekt und der Kontext übergeben. Wenn eine geänderte Variable eine reaktive Variable enthält, wird sie im Kontext aktualisiert.

 p(changed, ctx) { if(changed.name) { set_data(t1, ctx.name); } } 

In der vorherigen Implementierung durchlief der Vue-Compiler alle Knoten, einschließlich der statischen:

 function render(){ const children = []; for(let i = 0; i < 5; i++) { children.push(h('p', { class: 'text' }, i === 2 ? this.message : 'Lorem upsum')) } return h('div', { id: 'content' }, children) } 

Neue Strategie zur Vorlagenerstellung

In der neuen Version ist die Vorlage in Blöcke unterteilt:

• Die Vorlage ist in Blöcke unterteilt
• Die Struktur der Knoten in jedem Block ist vollständig statisch.
• Um dynamische Werte in einem Block zu verfolgen, ist nur 1 flaches Array erforderlich, in dem sie platziert werden

Bei der neuen Strategie hängt die Leistung direkt von der Menge des dynamischen Inhalts statt von der Größe der Vorlage ab.

Vue 3 wird besser an große Projekte angepasst

Bei großen Projekten treten bei der Verwendung von Vue die folgenden Probleme auf:

1. Keine perfekte TypeScript-Unterstützung
2. Massive, schwer zu tragende Komponenten
3. Fehlen eines einfachen Musters zur Wiederverwendung von Code

Ursprünglich war geplant, Klassen zur Unterstützung von TS hinzuzufügen. Das Vue-Team hatte jedoch Probleme:

• Das Mischen von Requisiten und anderen Attributen ist problematisch
• Dekoratoren für ES6-Klassen in TC39 sind instabil

Evans Team bat die TC39-Experten um Hilfe und stellte fest, dass eine ähnliche Implementierung zu Konflikten mit Plugins führen kann, die verschiedene Requisiten und Attribute in den Vue-Kontext integrieren.

Möglicherweise könnten diese Probleme von Dekorateuren gelöst werden, sie befinden sich jedoch noch in der Entwicklung.

Kompositions-API

Das Vue-Team ließ sich von den React-Hooks inspirieren und beschloss, eine ähnliche API zu erstellen. Es ist optional und befindet sich in der Entwicklung und Diskussion, daher können sich einige Namen ändern.
Das Hauptkonzept dieser Änderung besteht darin, den Komponentencode logischer zu organisieren und ihn in semantische Blöcke zu unterteilen. Weitere Informationen zur Kompositions-API finden Sie in der Dokumentation .

Ein Beispiel für die Verwendung von Vue 3. Eine Komponente ist in logische Funktionen unterteilt, in denen Sie Reaktivitäts- und Lebenszyklus-Hooks verwenden können.

Importieren Sie die neuen Hooks aus der Kompositions-API:

 import { reactive, computed, onMounted } from '@vue/composition-api'; export default { setup() { const { state } = countAnimal("rabbit") const { getType, anotherState } = anotherCount() return { state, getType, anotherState } } } 

Die Funktion countAnimal verfügt über die reaktiven Eigenschaften count, animal und die Inkrementmethode . Bei einem ungeraden Zähler ändert sich der Name des Tieres. Der Zähler startet, wenn die Komponente montiert ist.

 function countAnimal(name) { const state = reactive({ count: 0, animal: computed(() => state.count % 2 ? name : 'bear') }) function increment() { setTimeout(() => { state.count++; increment() }, 1000) } onMounted(() => { increment() }) return { state } } 

Wir erstellen eine weitere Funktion anotherCount , die auch die Methode increment und state mit dem Zähler und dem Namen des Tieres enthält. Die Methode getType übergibt den Namen des Tieres aus der Vorlage.

 function anotherCount() { const anotherState = reactive({ count: 0, animal: 'fox' }) function getType(name) { return name == 'bear' ? 'slow' : 'fast' } function increment() { setTimeout(() => { anotherState.count+=10; increment() }, 1000) } onMounted(() => { increment() }) return { getType, anotherState } } 

Die Vorlage zeigt 2 Zähler und 2 Tiernamen an. Die Art des Laufs hängt vom Namen des Tieres ab.

 <template> <div> <div>Count {{state.animal}}: {{ state.count }}</div> <div>{{state.animal}} runs {{getType(state.animal)}}</div> <div>Another: Count {{anotherState.animal}}: {{ anotherState.count }}</div> </div> </template> 

Neue Hooks werden im Setup verwendet, ohne die alte API zu beschädigen. Beachten Sie, dass sich onMounted auf einen Einzelkomponenten-Lifecycle-Hook bezieht.

Diese API hat mehrere Vorteile:

• Lifecycle Hooks reiben sich nicht
• Klare Quelle von Eigenschaften
• Es werden keine zusätzlichen Komponenteninstanzen erstellt

Fazit

Die wichtigsten Änderungen in Vue 3 sind oben aufgeführt: Die meisten Verbesserungen werden unter der Haube des vom Compiler generierten Codes verborgen.

Hauptverbesserungen:

• Der generierte Code ist optimal für den JS-Compiler
• Generiertes Bundle einfacher
• Übergeordnete / untergeordnete Komponenten werden dank des verbesserten Patch-Algorithmus neu gezeichnet

Vue hat sich als eines der schnellsten und optimalsten Frameworks etabliert. Die neue Version wird noch schneller und einfacher. Vue 3 eignet sich hervorragend für das mobile und leistungsorientierte Web von heute. Kommentare zu zukünftigen Änderungen können im offiziellen RFC hinterlassen werden (Bitte um Kommentare).
PS Vielen Dank für die Korrektur von Tippfehlern.