Einfache Implementierungsmethode der Vue3-Quellcodeanalyse

Vorwort

Vor Kurzem hat mein erstes offizielles Vue3+TS-Projekt die Abnahmephase erreicht. Als ich hörte, wie ihr die ganze Zeit über vue3, vue3 redet, wollte ich sehen, was der Unterschied zwischen vue3 und vue2 ist. 🤷🏻‍♀️🤷🏻‍♀️🤷🏻‍♀️

Dieser Artikel erläutert hauptsächlich die API-Verwendung von vue3 und implementiert einfach ein vue3. Lassen Sie mich Ihnen den Unterschied zwischen Vue3 und dem vorherigen Vue2 zeigen. Und enthüllen Sie kurz den Prozess der Vue3-Initialisierung im Quellcode.

🍹Vorbereitung

Wenn Sie sehen möchten, wie der Quellcode in vue3 erstellt wird, laden Sie zunächst eine Kopie des Quellcodes von GitHub auf Ihren lokalen Computer herunter, genau wie bei der Vue2-Quellcodeanalyse.

Als Nächstes müssen die Abhängigkeiten installiert werden:

Garn --Skripte ignorieren

Beim Ausführen des Befehls tritt möglicherweise die Fehlermeldung auf, dass die Knotenversion zu niedrig ist:

Um dieses Problem zu lösen, können Sie Ihre Knotenversion aktualisieren oder die Engine ignorieren.

Wenn Sie ignorieren möchten, können Sie

Garnkonfigurationssatz --ignore-engines true

Führen Sie dann die Abhängigkeitsinstallation durch.

Nachdem die Abhängigkeiten installiert sind, kompilieren und verpacken Sie, um VueJS-Dateien zu generieren:

Garn-Entwickler

Wenn Sie ein Debugging durchführen müssen, können Sie eine Testdatei unter der Datei packages\vue\examples erstellen. Um auf die gepackte Vue-Datei zu verweisen, können Sie packages\vue\dist\vue.global.js anwenden.

🍲vue3-Nutzung

Ich werde nicht näher auf die Funktionen von vue3 eingehen. Was die Verwendung von vue3 betrifft, so ist es eher auf funktionale Programmierung ausgerichtet. Durch die Bereitstellung der createApp()-API in Vue wird eine Anwendungsinstanz in Form einer Factory-Funktion erstellt. Im Vergleich zur neuen Vue-Instanz von vue2 ist es geeigneter.

In der Quellcodedatei erstellen wir eine neue init.html-Datei.

<script src="../dist/vue.global.js"></script>
 <Text>
  <div id="app">{{name}}</div>
  <Skript>
    const { createApp } = Vue
    const app1 = erstelleApp({
      Daten() {
        zurückkehren {
          Name: 'clying'
        }
      },
      aufstellen() {
        zurückkehren {
          Name: 'deng'
        }
      }
    }).mount('#App')
  </Skript>
</body>

Dem obigen Beispiel zufolge können wir sehen, dass vue3 sowohl die Composition API als auch die Options API unterstützt und beide gleichzeitig verwendet werden können.

Wir können jedoch sehen, dass ich sowohl in den Daten als auch im Setup eine Namensvariable für die Zuweisung verwendet habe. Welches wird also auf der Seite angezeigt?

3!2!1! Vorherige Antwort:

Es ist deutlich zu erkennen, dass das Setup in der Composition-API eine höhere Priorität hat.

Natürlich kann man auch im Quellcode packages\runtime-core\src\componentPublicInstance.ts sehen, dass der Schalter dazu dient, zunächst zu ermitteln, ob die Variable im setup vorhanden ist, und anschließend die Variable in den data zu ermitteln. Daher ist die Priorität von Variablen im Setup höher als die von Variablen in Daten.

🍖 Umsetzung

Durch die obige Verwendung können wir erkennen, dass vue3 eine Vue-Variable der Außenwelt zugänglich macht und dass darin Methoden wie createApp und reactive enthalten sind.

Hier implementieren wir zuerst das Initialisierungsframework von vue3. Was createApp betrifft, empfängt es die vom Benutzer übergebenen Parameter: data(), setup() usw. und mountet schließlich die Instanz. Daher werden einige Parameteroptionen in createApp empfangen und es wird darin auch eine Mount-Methode geben.

const Vue = {
    createApp(Optionen) {
      zurückkehren {
        mount(Selektor) { //analysieren, Render abrufen, mounten}
      }
    }
}

Holen Sie sich das Hostelement über den Selektor im Mount.

Der nächste Schritt besteht darin, die Vorlage zu kompilieren. Nach der Kompilierung der Vorlage in AST muss diese noch in eine Renderfunktion umgewandelt werden. Hier vereinfachen wir den Vorgang und geben zur Kompilierungszeit direkt ein Rendering zurück.

mount(Selektor) { //analysieren, rendern, mounten const parent = document.querySelector(Selektor)
  konsole.log(übergeordnet);
  wenn (!optionen.render) {
    // Kompilieren und Render zurückgeben
    Optionen.rendern = diese.CompileToFunction(übergeordnetes.innerHTML)
  }
},
KompilierenZuFunktion(Vorlage) {
  Rückgabefunktion render() {
    const h = document.createElement('div')
    h.textContent = dieser.name
    Rückkehr h
  }
}

Nachdem Sie das Rendering erhalten haben, führen Sie es aus, fügen Sie es dem Hostelement hinzu und löschen Sie den alten Knoten.

Beim Ausführen des Renderns müssen wir auf den This-Zeiger achten. Wenn Sie Daten daran binden, wird der Name in den Daten angezeigt.

mount(Selektor) { //analysieren, rendern, mounten const parent = document.querySelector(Selektor)
  konsole.log(übergeordnet);
  wenn (!optionen.render) {
    // Kompilieren und Render zurückgeben
    Optionen.rendern = diese.CompileToFunction(übergeordnetes.innerHTML)
  }
  // Render ausführen 
  const el = Optionen.render.call(Optionen.data())
  parent.innerHTML = ''
  übergeordnetes Element.AnhängenKind(el)
},

Sie können sehen, dass auf der Seite „Klicken“ angezeigt wird. Im Gegenteil, wenn options.setup() gebunden ist, wird Deng auf der Seite angezeigt.

Bei der Verwendung von vue3 wissen wir, dass das Setup eine höhere Priorität hat als die Daten. Dann können wir den Proxy verwenden, um die Attributvariablen der beiden über den Proxy miteinander zu kombinieren, wobei dem Setup Priorität eingeräumt wird. Beim Zugriff auf den gleichen Namen wird tatsächlich auf den Namen im Setup zugegriffen.

mount(Selektor) { //analysieren, rendern, mounten const parent = document.querySelector(Selektor)
  konsole.log(übergeordnet);
  wenn (!optionen.render) {
    // Kompilieren und Render zurückgeben
    Optionen.rendern = diese.CompileToFunction(übergeordnetes.innerHTML)
  }
  if (optionen.setup) {
    dies.setupState = options.setup()
  }
  wenn (Optionen.Daten) {
    diese.daten = optionen.daten()
  }
  dieser.proxy = neuer Proxy(dieser, {
    get(Ziel, Schlüssel) {
      if (Schlüssel in target.setupState) {
        returniere target.setupState[Schlüssel]
      } sonst wenn (Schlüssel in target.data) {
        returniere Ziel.Daten[Schlüssel]
      }// Es kann andere Variablen mit dem gleichen Namen geben, wie z. B. props und watch}, 
    setze(Ziel, Schlüssel, Wert, neuerWert) {
      console.log(Ziel, Schlüssel, Wert, neuerWert);
    }
  })
  // Render ausführen this.proxy ist der Kontext, der Setup und Daten integriert const el = options.render.call(this.proxy)
  console.log(el, Optionen.render);
  parent.innerHTML = ''
  übergeordnetes Element.AnhängenKind(el)
},

Beim Proxy-Get wird zunächst geprüft, ob das Zielattribut im Setup vorhanden ist. Wenn ja, wird die Attributvariable im Setup zurückgegeben, andernfalls die Attributvariable in den Daten. Beim Rendern übergeben Sie einfach den integrierten Variablensatz. Natürlich gibt es auch im Proxy eine festgelegte Methode. Sie müssen zuerst den Proxy verwenden und dann die Variablen extern abrufen, um Änderungen vorzunehmen, bevor sie ausgelöst werden können. Interessierte Studenten können dies selbst lernen!

Zusammenfassen

Dies ist das Ende dieses Artikels über die einfache Implementierung der Vue3-Quellcodeanalyse. Weitere relevante Inhalte zur Vue3-Quellcodeanalyse finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!