Vue und React im Detail

1. Panorama

II. Hintergrund

1. Reagieren: Professionell

• React wurde 2011 geboren (FaxJS),
• 3. Juli 2013 v0.3.0
• 30. März 2016 v0.14.8
• 9. April 2016 v15.0.0
• 27. September 2017 v16.0.0, Fiber wurde offiziell eingeführt
• Im Jahr 2019 wurde React 16.8 veröffentlicht, um die Hook-Syntax offiziell zu unterstützen.
• 22. Oktober 2020 v17
  

Lösung des Problems:

We build React to solve one problem:building large applications with data that changes over time. React entwickelt, um ein Problem zu lösen: das Erstellen großer Anwendungen mit Daten, die sich im Laufe der Zeit ändern.

2. Ansicht: Legende

Es begann 2013 als persönliches Projekt, ist aber mittlerweile zu einem der drei wichtigsten Front-End-Frameworks der Welt und zur ersten Wahl für Front-Ends auf dem chinesischen Festland geworden. (Interviewer fragte: Warum haben Sie gelernt, Vue zu verwenden? Antwort: Aus Patriotismus!)

• Im Jahr 2013 ließ sich Yuxi You, der bei Google arbeitete, von Angular inspirieren. Er extrahierte seine Lieblingsteile daraus und entwickelte ein leichtes Framework, das ursprünglich Seed hieß.
• Im Dezember desselben Jahres ging der Samen auf und wurde in Vue umbenannt (weil es sich um eine Ansichtsebenenbibliothek handelt und „vue“ das französische Wort für view ist) und die Versionsnummer war 0.6.0.
• Am 24. Januar 2014 wurde Vue mit der Versionsnummer 0.8.0 offiziell der Öffentlichkeit zugänglich gemacht.
• 0.9.0, veröffentlicht am 25.02.2014, hat einen eigenen Codenamen: Animatrix . Dieser Name stammt von der animierten Version von „Matrix“. Von da an haben wichtige Versionen ihre eigenen Codenamen.
• 0.12.0 wurde am 13. Juni 2015 mit dem Codenamen Dragon Ball veröffentlicht. In diesem Jahr erlebte Vue einen großen Boom. Die Laravel -Community (eine beliebte PHP-Framework-Community) verwendete Vue zum ersten Mal und Vue gewann auch in der JS-Community an Popularität.
• 1.0.0 Evangelion ist der erste Meilenstein in der Geschichte von Vue . Im selben Jahr wurden nacheinander vue-router (18.08.2015), vuex (28.11.2015) und vue-cli (27.12.2015) veröffentlicht, was die Entwicklung Vue von einer Ansichtsebenenbibliothek zu einem fortschrittlichen Framework markiert. Viele Front-End-Studenten wurden ab dieser Version auch zu Vue-Benutzern (vue1 ist rein responsive).
• 1. Oktober 2016 2.0.0 Ghost in the Shell war der zweite wichtige Meilenstein. Es absorbierte die Virtual Dom -Lösung von React und unterstützte auch serverseitiges Rendering.
• Am 4. Februar 2019, lange vor der Veröffentlichung von 2.6, war Vue Kernteam mit der Entwicklung von vue-cli3.0 beschäftigt, sammelte viele Anforderungen und veröffentlichte die vorletzte Version von vue2 (veröffentlicht im Jahr 2020).
• 18. September 2020 vue3 ist da mit der Mission, ein Framework zu werden, das jeder schnell erlernen kann und leicht zugänglich ist. Im selben Jahr wurde auch ein neues Verpackungstool, Vite, eingeführt (das in Zukunft möglicherweise webpack ersetzt).

Das Vue-Massenbasisdiagramm sieht wie folgt aus:

3. Technisches Denken

react ist insgesamt ein funktionales Konzept. Die Komponenten verwenden die JSX-Syntax, all in js , und integrieren html und CSS in javaScript . Die JSX-Syntax ist relativ flexibler.

Die Grundidee von Vue besteht immer noch darin, das klassische Format html (Struktur) + CSS (Leistung) + JS (Verhalten) zu übernehmen. Vue ermutigt Entwickler, template zu verwenden, und bietet Entwicklern Anweisungen zur Verwendung, wie z. B. v-if , v-show , v-for und andere Anweisungen. Daher entsteht beim Entwickeln von Vue-Anwendungen das Gefühl, klassische Webanwendungen zu schreiben (Trennung von Struktur, Leistung und Verhalten).

Einige allgemeine Unterschiede und Ähnlichkeiten in der Datenverwaltung ( props , data vs state ), beim Schreiben von Komponenten und im Lebenszyklus werden hier nicht verglichen.

1. Nehmen Sie die Ähnlichkeiten und Unterschiede der Schlüssel als Beispiel

1. Das ultimative Ziel von react und Vue beim Hinzufügen von Schlüsseln zu Listen ist dasselbe: den entsprechenden Vnode-Knoten in oldVnode genauer und schneller abzurufen, um die Leistung zu verbessern. Es gibt jedoch gewisse Unterschiede in den von ihnen implementierten Algorithmen.

1.1 reagieren

Wenn React ein Array rendert und die untergeordnete Komponente keinen Schlüssel bereitstellt, wird standardmäßig der Schleifenindex als Schlüssel für das erste Rendering verwendet. Der Quellcode ist im Wesentlichen eine Brute-Force-Vergleichsmethode: Da die einfach verknüpfte Listenfaser den Doppelzeigeralgorithmus nicht verwenden kann, kann die Doppelzeigeroptimierung nicht auf den Algorithmus angewendet werden. Im Allgemeinen gibt es zwei Durchlaufrunden. Die erste Durchlaufrunde: Verarbeitung aktualisierter Knoten. Zweite Durchlaufrunde: Verarbeiten Sie die verbleibenden Knoten, die nicht Teil der Aktualisierung sind.

Um die Komplexität des Algorithmus zu reduzieren, verfügt Reacts Diff über voreingestellte Grenzen:

Nur Diff-Elemente derselben Ebene. Wenn ein DOM-Knoten zwischen zwei Aktualisierungen die Hierarchie überschreitet, versucht React nicht, ihn wiederzuverwenden.
Zwei Elemente unterschiedlichen Typs erzeugen unterschiedliche Bäume. Wenn sich das Element von div zu p ändert, zerstört React div und seine untergeordneten Knoten und erstellt ein neues p und seine untergeordneten Knoten.
Bestimmen Sie zuerst den Schlüssel und dann den Typ. Wenn beide gleich sind, handelt es sich um denselben Knoten. Aktualisieren > Hinzufügen/Löschen

1.2 Ansicht

vue ist in Bezug auf die Diff-Leistung stärker als React. Nachdem ich den Quellcode und die Bücher sorgfältig gelesen habe, bewundere ich es sehr. Nehmen wir eine Algorithmusfrage – die am längsten zunehmende Teilfolge als Beispiel: Nehmen wir das Array [2, 11, 6, 8, 1] als Beispiel: Das endgültige Ausgabeergebnis ist [0, 2, 3], was bedeutet, dass die Indizes der am stärksten zunehmenden Folge jeweils 0, 2 und 3 sind; die entsprechenden Werte sind 2, 6 und 8. Mit anderen Worten, die am längsten kontinuierlich wachsenden Werte in diesem Array sind die drei Elemente 2, 6 und 8 im Array.

Vue3 hat also so viel Aufwand in die Verwendung dieser Methode gesteckt. Was ist der Zweck? Während des DOM-Diff -Prozesses behandelt Vue2 vorrangig spezielle Szenarien, nämlich Kopf-an-Kopf-Vergleiche, Kopf-an-Schwanz-Vergleiche, Schwanz-an-Kopf-Vergleiche usw.

Während DOM-Diff -Prozesses findet Vue3 die längste stabile Sequenz basierend auf den neuen und alten Knotenindexlisten von newIndexToOldIndexMap und vergleicht den Algorithmus mit der längsten zunehmenden Teilsequenz, um die Knoten zu finden, die in den neuen und alten Knoten nicht verschoben werden müssen, sie an Ort und Stelle wiederzuverwenden und nur die Knoten zu bearbeiten, die verschoben werden müssen oder patch wurden (Knoten hinzufügen und löschen usw.), wodurch die Ersetzungseffizienz maximiert wird. Im Vergleich zur Vue2-Version ist dies eine qualitative Verbesserung!

2. Makrovergleich von Diff

2.1 reagieren

Wenn sich in React der Status einer Komponente ändert, rendert React diese Komponente und alle ihre untergeordneten Komponenten erneut. Das erneute Rendern bedeutet jedoch nicht, dass alle vorherigen Renderergebnisse verworfen werden. react vergleicht die beiden virtuellen DOMs weiterhin über diff und patch schließlich auf das reale DOM. Wenn der Komponentenbaum jedoch zu groß ist, entsteht für „diff“ immer noch ein gewisser Overhead. react optimiert den Diff-Algorithmus intern über fiber und empfiehlt Entwicklern extern, shouldComponentUpdate pureComponent zu verwenden, um das Problem zu vermeiden.

2.2 Ansicht

Die Reaktionsfähigkeit von vue2 wird durch Object.defineProperty implementiert, und eine Reihe von Operationen wie Getter und Setter werden neu geschrieben, um den Beobachtermodus zu implementieren. Sobald sich die Daten ändern, wird nicht wie bei React der gesamte Komponentenbaum verglichen, sondern die Komponenteninstanz aktualisiert, deren Datenstatus sich geändert hat.

3. Lebenszyklus

3.1 Lebenszyklus reagieren

alt 15.x-16

neu 16+

Sonstiges: componentDidCatch

Die Benennung von React -Lebenszyklen war schon immer sehr semantisch (Flüstern: sie ist wirklich lang und schwer zu merken).

3.2 Vue-Lebenszyklus

4. Funktionale Programmierung

Beide Parteien haben umfangreiche Änderungen vorgenommen. Obwohl die Quellcodes unterschiedlich sind, wurden Fortschritte in Bezug auf Designideen und Code-Vereinfachung erzielt.

4.1 Reaktionshaken

Obwohl der ursprünglich umständliche compomentDidUpdate lifecycle => useEffect nicht genau dasselbe ist, sind wir aus Sicht des Entwicklers in den meisten Fällen mehr daran interessiert, welche Konsequenzen (Nebeneffekte) auftreten, wenn sich die Daten in props oder der Status ändern. Dadurch entfällt der Prozess, bei dem Entwickler die Vorher- und Nachher-Werte vergleichen. (Dies sollte eine React-Anleihe von vue watch sein.)

4.2 Vue3-Kombinations-API

vue3 API übernimmt einige Ideen von react hooks . Man muss sagen, dass sie besser ist als das Original. Darüber hinaus wurde auch im Framework selbst viel Optimierungsarbeit geleistet, sodass React in der Leistung nicht mithalten kann.

Funktion() {
    Effekt verwenden(()=>{
        //Trigger console.log(demo), wenn sich die Demo ändert
    },[Demo])
    
    zurückkehren (
        <div>reagieren</div>
    )
}

importiere {reactive, watchEffect} von 'vue'
Standard exportieren {
    aufstellen() { 
          const state = reaktiv({Anzahl: 0, Name: 'zs'})
          UhrEffekt(() => {
            Konsole.log(Status.Anzahl)
            console.log(Status.Name)
          })
          zurückkehren {
            Zustand
          }
    }
}

Aufgrund des Reaktionsmechanismus im Quellcode während der Initialisierung muss der neue APIwatchEffect nicht einmal überwachen, wer sich geändert hat, um den Nebeneffekt auszulösen, da der gesamte Überwachungsprozess vom Proxy im vue3 Quellcode abgeschlossen wird.

Darüber hinaus hat vue3 eine Syntax eingeführt, die näher an nativem JS liegt, Daumen hoch! ! ! ! ! !

<Skript-Setup>
importiere { reaktiv, ref} von "vue";

// Progressives Update: ref api
Lassen Sie val = ref("");
let todos = reaktiv([
  {
    ID: 0,
    Titel: "Essen",
    erledigt: falsch,
  },
  {
    ID: 1,
    Titel: "Schlafen",
    erledigt: falsch,
  },
]);

Funktion addTodo() {
  todos.push({
    ID: todos.length,
    Titel: val.value,
    erledigt: falsch,
  });
  Wert.Wert = "";
}
</Skript>

Tatsächlich müssen Studenten, die mit dem vue Technologie-Stack vertraut sind, an diesem Punkt insgeheim stolz sein und sagen: „ vue yes !“ Leider hat eine so gute Bibliothek auch ihre eigenen Probleme. Es ist eine Binsenweisheit, dass das responsive Object.defineProperty vue2 die Änderungen der Array-Indizes und neu hinzugefügten Eigenschaftswerte von Objekten nicht überwachen kann. Während vue3 Proxy Api verwendet, um diese Probleme zu lösen, bringt es auch neue Probleme mit sich. Beispielsweise kann reactive nur Objekte übergeben ( react useState kann einfache und komplexe Werte übergeben), während der offiziell empfohlene Ref den Wert über .value abrufen muss. Das lässt die Community wirklich explodieren. Aus diesem Grund war das Vue-Team gezwungen, toRefs unter Druck zu starten (interessierte Studenten können sich darüber informieren. Ich habe es zuvor offline mit Yibao besprochen).

5. Ereignisbehandlung (@Click vs. onClick)

5.1 Ansicht

vue verwendet v-on (abgekürzt als:), um auf DOM-Ereignisse zu hören und bei Auslösung JavaScript Code auszuführen. v-on wird normalerweise verwendet, um einen Methodennamen zu erhalten, der aufgerufen werden muss.

<div @click="helloShanghai">willkommen</div>
<div @click="helloShanghai('hello')">willkommen</div>

Um auf native DOM-Ereignisse zuzugreifen, können Sie $event explizit an method übergeben.

<div @click="helloShanghai('hallo', $event)">willkommen</div>

Gewöhnliches Element addEventListener , Komponente $on

5.2 reagieren

Die Ereignisbehandlung für React Elemente ähnelt stark der für DOM-Elemente, es gibt jedoch einen kleinen Unterschied in der Syntax:

• React -Ereignisse werden in CamelCase statt in reinen Kleinbuchstaben benannt.
• Wenn Sie die JSX-Syntax verwenden, müssen Sie als Ereignishandler eine Funktion übergeben, keinen String.
  

<div onClick={this.handleClick}>Klick mich</div>
<div onClick={this.handleClick.bind(this)}>Klick mich</div>
<div onClick={()=>{this.handleClick()}）}>Klick mich</div>
<div onClick={this.handleClick()}>Klick mich</div><!-- Falsche Schreibweise>

React16 mountet synthetische Ereignisse im document und ab Version 17 ist es root Stammelement.

6. Komponentenbildung

Vue empfiehlt das Schreiben von Vorlagen, die normalem HTML ähneln. Es ist sehr ähnlich wie Standard-HTML-Elemente geschrieben, verfügt jedoch über einige zusätzliche Attribute. React empfiehlt, alle Ihre Vorlagen in JSX zu schreiben, einer gängigen JavaScript Syntaxerweiterung.

7. Werkzeuge erstellen

React ==> React-App erstellen Vue ==> vue-cli

8. Sonstiges

Natürlich gibt es auch andere Vergleiche, wie etwa die Slots von Vue und props.children von React. Lebenszyklus: getDerivedStateFormProps , getSnapshotBeforeUpdate

Meine Meinung:

1. React wird in Mid-End- und Back-End-Projekten anerkannt, da es bei der Handhabung komplexer Geschäftslogik oder der Wiederverwendung von Komponenten eleganter ist als Vue. Es erfordert jedoch auch eine stärkere technische Gesamtstärke des Teams und bessere Design- und Qualitätskontrollfähigkeiten des Leiters, sodass die Entwicklungskosten höher sind. 2. vue ist für seinen benutzerfreundlicheren und einfacher zu verwendenden Schreibstil bekannt. Seine benutzerfreundlichere API und sein benutzerfreundlicheres Design verbessern die Entwicklungskosten und -effizienz erheblich. 3. Auf der anderen Seite verfügt Vue über viele APIs, die Entwickler standardisieren, aber auch das divergierende Denken der Entwickler bis zu einem gewissen Grad einschränken; react hingegen verfügt über weniger APIs, die die Kreativität der Entwickler verbessern, was aber auch daran liegt, dass jeder react Entwickler ein anderes Verständnis von react hat und unterschiedliche Code-Stile produziert. 4. Vue und React sind im Laufe der langen Entwicklung ausgereifter geworden. Nach sorgfältiger Überlegung bin ich der Meinung, dass beide sehr gut machbar sind, egal ob auf der mobilen Seite oder im großen mittleren und hinteren Bereich. Was die Frage betrifft, ob das Framework gut oder schlecht ist, sollten wir eigentlich mehr darüber nachdenken, welchen Technologie-Stack das Unternehmensteam verwenden möchte, welchen Technologie-Stack Sie mögen und in welchem ​​Sie gut sind usw.

5. Familieneimer

Dies ist das Ende dieses ausführlichen Artikels über vue und react . Weitere relevante Inhalte zu Vue und react finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!