Vergleich der Vorteile von vue3 und vue2

Abstrakt:

Das Konzept der neuen Version von Vue3 entstand Ende 2018, als Vue 2 bereits zweieinhalb Jahre alt war. Verglichen mit dem Lebenszyklus allgemeiner Software erscheint dies nicht so lang. Vue3 wurde 2020 offiziell eingeführt, mit wesentlichen Änderungen im Quellcode und der API. Die Leistung wurde erheblich verbessert und ist 1,2- bis 2-mal schneller als bei Vue2.x.

Das Konzept der neuen Version von Vue3 entstand Ende 2018, als Vue 2 bereits zweieinhalb Jahre alt war. Verglichen mit dem Lebenszyklus allgemeiner Software erscheint dies nicht so lang. Vue3 wurde 2020 offiziell eingeführt, mit wesentlichen Änderungen im Quellcode und der API. Die Leistung wurde erheblich verbessert und ist 1,2- bis 2-mal schneller als bei Vue2.x.

Zu den wichtigsten Vorteilen zählen unter anderem:

Optimierung des Diff-Algorithmus: statische Verbesserung hoistStatic ; cacheHandlers -Ereignislistener-Cache; ssr Rendering; bessere Ts-Unterstützung; Compostion API : Kombination aus API/Injection-API; erweiterte Komponenten; benutzerdefiniertes Rendering-API; On-Demand-Kompilierung, kleinere Größe als vue2.x; Unterstützung für Multi-Root-Node-Komponenten usw.

Lassen Sie uns im Detail über die Vorteile von vue3 sprechen:

Vorteil 1: Optimierung des Diff-Algorithmus

Der virtuelle DOM in Vue2 ist ein vollständiger Vergleich (jeder Knoten, ob fest codiert oder dynamisch, wird Schicht für Schicht verglichen, wodurch die meisten Ereignisse beim Vergleich statischer Knoten verschwendet werden).

Vue3 fügt ein statisches Flag ( patchflag ) hinzu. Beim Vergleich mit dem letzten virtuellen Knoten werden nur die Knoten mit patch flag (die Knoten, in denen sich dynamische Daten befinden) verglichen; die Flag-Informationen können verwendet werden, um den spezifischen Inhalt des aktuellen zu vergleichenden Knotens zu ermitteln.

Beispielsweise enthält die folgende Vorlage ein Div mit drei Absätzen. Die ersten beiden Absätze sind statisch und festgelegt, während der Inhalt des dritten Absatzes an das msg Attribut gebunden ist. Wenn sich msg ändert, generiert Vue ein neues virtuelles DOM und vergleicht es mit dem alten.

<div>
 <p>Gemeinsame Erstellung von Cloud-Residenzen</p>
 <p>So bewerten Sie vue3</p>
 <p>{{msg}}</p>
</div>

Beim Aktualisieren der Ansicht werden nur die dynamischen Knoten differenziert, was den Ressourcenverbrauch reduziert. Patchflag ist eine Aufzählung. Ein Wert von 1 bedeutet, dass der Text dieses Elements dynamisch gebunden ist, und ein Wert von 2 bedeutet, dass class des Elements dynamisch gebunden ist.

Vorteil 2: HebezeugStatisches statisches Heben

Vue2 führt jedes Mal eine Neuerstellung und ein Rendering durch, unabhängig davon, ob das Element an der Aktualisierung teilnimmt. Für Elemente, die nicht am Update teilnehmen, führt Vue3 eine statische Promotion durch. Sie werden nur einmal erstellt und können beim Rendern direkt wiederverwendet werden. Verwenden wir beispielsweise Vue 3 Template Explorer um ein intuitives Gefühl dafür zu bekommen:

<div>
    <div>Gemeinsam gestalten 1</div>
    <div>Gemeinsam gestalten 2</div>
    <div>{{name}}</div>
</div>

Vor dem statischen Heben

Exportfunktion rendern(...) {
    zurückkehren (
        _openBlock(),
        _createBlock('div', null, [
            _createVNode('div', null, 'Miterstellen 1'),
            _createVNode('div', null, 'Gemeinsame Kreation 2'),
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

Nach dem statischen Heben

const _hoisted_1 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    „Mitgestalten 1“,
    -1 /* GEHOBT */
)
const _hoisted_2 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    „Ko-Kreation 2“,
    -1 /* GEHOBT */
)

Exportfunktion rendern(...) {
    zurückkehren (
        _openBlock(),
        _createBlock('div', null, [
            _gehisst_1,
            _gehisst_2,
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

Aus dem obigen Code ，_hoisted_1 und _hoisted_2 außerhalb der Rendering-Funktion render hochgestuft werden, was wir als statische Hochstufung bezeichnen. Durch die statische Promotion kann die Neuerstellung dieser Objekte bei jedem Rendern vermieden und so die Rendereffizienz erheblich verbessert werden.

Vorteil 3: cacheHandlers Event-Listener-Cache

In vue2.x muss jedes Mal, wenn ein gebundenes Ereignis ausgelöst wird, eine neue function neu generiert und aktualisiert werden. cacheHandlers ist ein in Vue3 bereitgestelltes Ereignis-Cache-Objekt. Wenn cacheHandlers aktiviert ist, wird automatisch eine Inline-Funktion generiert und gleichzeitig ein statischer Knoten generiert. Wenn das Ereignis erneut ausgelöst wird, muss es nur aus dem Cache aufgerufen werden, ohne erneut aktualisiert zu werden.

Standardmäßig wird onClick als dynamische Bindung betrachtet, sodass seine Änderungen jedes Mal verfolgt werden. Es besteht jedoch keine Notwendigkeit, Änderungen für dieselbe Funktion zu verfolgen. Sie können sie einfach zwischenspeichern und wiederverwenden.

Verwenden wir beispielsweise Vue 3 Template Explorer um die Auswirkungen des Event-Listener-Cachings zu sehen:

<div>
    <div @click="todo">Mach etwas Lustiges</div>
</div>

Nach der Kompilierung hat dieser html -Abschnitt die folgende Struktur (der Ereignisüberwachungscache ist nicht aktiviert):

Exportfunktion rendern(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{ onClick: _ctx.todo}, 'Mach etwas Interessantes', 8 /* PROPS */,
                ['beim Klicken']),
        ])
    )
}

Wenn wir das Caching des Ereignislisteners aktivieren:

Exportfunktion rendern(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{
                    onClick: //Nach dem Aktivieren von monitoring_cache[1] || (_cache[1] = (...args) =>_ctx.todo(...args)),
                },'Mach etwas Interessantes'),
        ])
    )
}

Wir können den Code vor und nach dem Einschalten des Event-Listening-Cache vergleichen. Möglicherweise verstehen Sie den Code nach der Konvertierung nicht, aber das macht nichts. Wir müssen nur beobachten, ob statische Tags vorhanden sind. Im Diff-Algorithmus von Vue3 werden nur diejenigen mit statischen Tags verglichen und verfolgt.

Vorteil 4: SSR-Rendering

Vue2 verfügt auch über SSR-Rendering, aber das SSR-Rendering in Vue3 weist im Vergleich zu Vue2 entsprechende Leistungsverbesserungen auf.

Wenn eine große Menge statischer Inhalte vorhanden ist, werden diese Inhalte als reine Zeichenfolge in einen buffer verschoben. Selbst wenn eine dynamische Bindung vorliegt, wird sie durch Vorlageninterpolation eingeschmuggelt. Dies ist viel schneller als das Rendern über virtuelles DMO.

Wenn der statische Inhalt groß genug ist, wird die Methode _createStaticVNode verwendet, um einen static node auf dem Client zu generieren. Diese statischen Knoten sind direkt innerHtml , sodass keine Objekte erstellt und dann entsprechend den Objekten gerendert werden müssen.

Vorteil 5: Bessere Ts-Unterstützung

Aufgrund des Option API Stils von vue2 ist Vue2 nicht für die Verwendung von ts geeignet. options sind einfache Objekte, während ts ein Typsystem mit objektorientierter Syntax ist. Die beiden passen nicht so recht zusammen.

In der konkreten Praxis der Kombination von vue2 mit ts wird vue-class-component verwendet, um Vue-Komponenten zu stärken, Script unterstützt TypeScript-Dekoratoren und vue-property-decorator wird verwendet, um weitere Dekoratoren hinzuzufügen, die Vue-Funktionen kombinieren. Letztendlich sind die Methoden zum Schreiben von Komponenten von ts und js ziemlich unterschiedlich.

In vue3 wird eine defineComponent Funktion angepasst, um es Komponenten zu ermöglichen, die Parametertypinferenz unter ts besser zu nutzen. Im Composition API -Codierungsstil sind die repräsentativeren APIs ref und reactive, die auch Typdeklarationen sehr gut unterstützen.

importiere { defineComponent, ref } von 'vue'
const Komponente = defineComponent({
    Requisiten: {
        Erfolg: { Typ: String },
        Student:
          Typ: Objekt als PropType<Student>,
          erforderlich: true
       }
    },
    aufstellen() {
      Konstantes Jahr = Ref(2020)
      const Monat = ref<Zeichenfolge | Zahl>('9')
      Monat.Wert = 9 // OK
     const Ergebnis = Jahr.Wert.Split('') 
 }

Vorteil 6: Compostion API: Kombinations-API/Injection-API

Herkömmliche Webseiten werden durch html/css/javascript (Struktur/Stil/Logik) getrennt. Vue verwendet die Komponentenbildung, um eng verwandte Strukturen/Stile/Logiken zusammenzufügen, was die Codewartung erleichtert. compostionapi geht einen Schritt weiter und konzentriert sich auf den JS-Teil (Logik), indem es logisch zusammengehörigen Code zusammenfügt, was die Codewartung erleichtert.

Der Option API Stil ( data/methods/mounted ) wird verwendet, um den Code in vue2-Komponenten zu organisieren, wodurch die Logik verteilt wird. Um beispielsweise eine Zählerfunktion abzuschließen, müssen wir Variablen in data deklarieren, Antwortfunktionen in methods definieren und Variablen in mounted initialisieren. Wenn Sie eine solche Funktion in einer Komponente mit vielen Funktionen und einer großen Menge an Code verwalten möchten, müssen Sie wiederholt zur entsprechenden Position in data/methods/mounted wechseln und dann den Code ändern.

Verwenden Sie in vue3 die setup Funktion. Wie unten gezeigt, wird die mit dem Zählen verbundene Logik in der Datei counter.js und die mit todo verbundene Logik in todos.js platziert.

importiere useCounter aus './counter'
importiere useTodo aus „./todos“

aufstellen(){
let { val, todos, addTodo } = useTodo()
let { zählen, addieren } = useCounter() 
zurückkehren {
val, todos, addTodo,
zählen, hinzufügen,
}

Vorteil 7: Fortschrittlichere Komponenten

Vue2 erlaubt das Schreiben nicht. Die Komponente muss einen Stammknoten haben. Jetzt können Sie es so schreiben und Vue erstellt für uns einen virtuellen Fragment .

<Vorlage>
<div>Huawei Cloud-Experten</div>
<div>Full-Stack-Blogger</div>
</Vorlage>

Bevor Suspended-component vollständig gerendert ist, wird der alternative Inhalt angezeigt. Wenn es sich um eine asynchrone Komponente handelt, kann Suspense auf den Download der Komponente warten oder einige asynchrone Vorgänge in der Setup-Funktion ausführen.

Vorteil 8: Benutzerdefinierte Rendering-API

Die Projektarchitektur von vue2.x ist nicht sehr benutzerfreundlich für das Rendering auf verschiedenen Plattformen wie weex (eine plattformübergreifende Lösung für Mobilgeräte) und myvue (wird für Miniprogramme verwendet). Vue3.0 hat eine benutzerdefinierte Rendering-API eingeführt, um dieses Problem zu lösen. Schauen wir uns als Nächstes die Unterschiede zwischen den Methoden zum Schreiben von Einträgen von vue2 und vue3 an.

Ansicht2:

Vue von „vue“ importieren
App aus „./App.vue“ importieren
neue Vue({ => h(App)}).$mount('#app')

Ansicht3:

const { createApp } von "vue"
App aus "./src/App" importieren
erstelleApp(App).mount(('#app')

createApp generiert HTML-Code für unsere template . Wenn Sie jedoch nicht in HTML, sondern in canvas oder anderen Nicht-HTML-Code rendern möchten, müssen Sie Custom Renderer API verwenden, um Ihre eigene Rendergenerierungsfunktion zu definieren.

importiere { createApp } aus "./runtime-render";
App aus "./src/App" importieren; // Stammkomponente createApp(App).mount('#app');

Durch die Verwendung benutzerdefinierter Rendering-APIs wie weex und myvue lässt sich das Problem perfekt lösen. Überschreiben Sie einfach createApp .

Vorteil 9: Kompilierung bei Bedarf, kleiner als vue2.x

Auch die Größe des Rahmens beeinflusst seine Leistung. Dies ist ein einzigartiges Problem bei Webanwendungen, da die Ressourcen sofort heruntergeladen werden müssen und die Anwendung daher erst interaktiv ist, wenn der Browser das erforderliche JavaScript analysiert hat. Dies gilt insbesondere für Single-Page-Anwendungen. Obwohl Vue immer relativ leichtgewichtig war (die Laufzeitgröße von Vue 2 beträgt komprimiert 23 KB).

In Vue 3 wurde dies erreicht, indem die meisten globalen APIs und internen Helfer in ES-Modulexporte verschoben wurden. Dies ermöglicht modernen Bundlern, Modulabhängigkeiten statisch zu analysieren und nicht verwendeten exportbezogenen Code zu entfernen. Der Vorlagencompiler generiert außerdem benutzerfreundlichen Tree-shaking -Code und importiert den Funktionshelfer, wenn die Funktion tatsächlich in der Vorlage verwendet wird.

Für einige Teile des Frameworks wird niemals Tree-shaking durchgeführt, da sie für jede Art von Anwendung unverzichtbar sind. Die Messungen dieser wesentlichen Teile bezeichnen wir als Basismaße. Trotz der Hinzufügung vieler neuer Funktionen beträgt die Basisgröße von Vue 3 im gzippten Zustand etwa 10 KB, also weniger als die Hälfte von Vue 2.

Vorteil 10: Unterstützung mehrerer Stammknotenkomponenten

In Vue3 ist eine Vorlage nicht mehr auf mehrere Stammknoten beschränkt. ( Attribute auf mehreren Stammknoten) Es muss explizit definiert werden, wohin attribute verteilt werden sollen. Andernfalls gibt die Konsole eine Warnmeldung aus.

In Vue 3 unterstützen Komponenten jetzt offiziell Multi-Root-Komponenten, auch Fragmente genannt!

In 2.x wurden Multi-Root-Komponenten nicht unterstützt und es wurde eine Warnung ausgegeben, wenn der Benutzer versehentlich eine Multi-Root-Komponente erstellte. Um diesen Fehler zu beheben, wurden daher mehrere Komponenten zu einer zusammengefasst. wie folgt

<Vorlage>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</Vorlage>

In 3.x können Komponenten jetzt mehrere Stammknoten haben! Dies erfordert jedoch, dass der Entwickler explizit definiert, wo die Attribute verteilt werden sollen.

<Vorlage>
  <header>...</header>
  <main v-bind="$attrs">…</main>
  <footer>...</footer>
</Vorlage>

Zusammenfassen:

• Vue ist eines der beliebtesten Front-End-Frameworks in China. Die Leistung wurde verbessert, die Laufgeschwindigkeit beträgt das 1,2- bis 2-fache von vue2.
• Aufgrund der geringeren Größe ist die On-Demand-Kompilierungsgröße von vue2 kleiner.
• Typinferenz und bessere Unterstützung für ts sind ebenfalls ein Trend.
• APIs auf höherer Ebene stellen APIs auf niedrigerer Ebene bereit und bieten erweiterte integrierte Komponenten.
• Kombinierte APIs können Logik besser organisieren, Logik kapseln und Logik wiederverwenden

Dies ist das Ende dieses Artikels über die Vorteile von vue3 gegenüber vue2. Weitere Informationen zu den Vorteilen von vue3 gegenüber vue2 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!