Nutzungsszenarien und Quellcodeanalyse der Funktionskomponenten erweiterter Vue-Komponenten

einführen

Vue bietet eine funktionale Komponente, die Komponenten zustands- und instanzenfrei machen kann. Im Prinzip durchlaufen die meisten Unterkomponenten den Instanziierungsprozess, aber reine Funktionskomponenten haben diesen Prozess nicht. Sie können einfach als Zwischenschicht verstanden werden, die nur Daten verarbeitet und keine Instanzen erstellt. Aufgrund dieses Verhaltens ist der Rendering-Overhead auch viel geringer. Das tatsächliche Anwendungsszenario besteht darin, dass wir, wenn wir eine von mehreren Komponenten zum Rendern in unserem Namen auswählen müssen oder Daten wie untergeordnete Elemente, Requisiten und Daten verarbeiten müssen, bevor wir sie an untergeordnete Komponenten übergeben, Funktionskomponenten verwenden können, um dies abzuschließen. Dabei handelt es sich im Wesentlichen um eine externe Verpackung der Komponente.

Anwendungsszenarien

Definieren Sie zwei Komponentenobjekte, test1, test2

var test1 = {
Requisiten: ['msg'],
rendern: Funktion (createElement, Kontext) {
  gibt createElement('h1', diese.msg) zurück
}
}
var test2 = {
Requisiten: ['msg'],
rendern: Funktion (createElement, Kontext) {
  gibt createElement('h2', diese.msg) zurück
}
}

Definieren Sie eine Funktionskomponente, die basierend auf dem Berechnungsergebnis eine der Komponenten zur Auswahl auswählt

Vue.Komponente('test3', {
// Das Flag functional der Funktionskomponente wird auf true gesetzt
funktional: wahr,
Requisiten: ['msg'],
rendern: Funktion (createElement, Kontext) {
  var get = Funktion() {
    Rückgabetest1
  }
  returniere createElement(get(), Kontext)
}
})

Einsatz funktionaler Komponenten

<test3 :msg="msg" id="test">
</test3>
neuer Vue({
el: '#app',
Daten: {
  Nachricht: "Test"
}
})

Das endgültige gerenderte Ergebnis ist:

<h2>Prüfung</h2>

Quellcodeanalyse

Funktionale Komponenten setzen die funktionale Eigenschaft in der Komponentenobjektdefinition auf true. Diese Eigenschaft ist der Schlüssel zur Unterscheidung von gewöhnlichen Komponenten und funktionalen Komponenten. Ähnlich verhält es sich, wenn ein Platzhalter für eine Unterkomponente gefunden wird: „createComponent“ wird eingegeben, um die Unterkomponente Vnode zu erstellen. Aufgrund der Existenz der Funktionseigenschaft wechselt der Code in den Funktionskomponentenzweig und gibt das Ergebnis des Aufrufs „createFunctionalComponent“ zurück. Beachten Sie, dass nach der Ausführung von createFunctionalComponent die nachfolgende Logik zum Erstellen von untergeordneten Vnodes nicht ausgeführt wird. Dies ist auch der Grund, warum beim Erstellen realer Knoten keine untergeordneten Vnodes vorhanden sind, um untergeordnete Komponenten zu instanziieren. (Keine Beispiele)

Funktion Komponente erstellen(){
  ···
  wenn (istTrue(Ctor.options.functional)) {
    returniere createFunctionalComponent(Ctor, propsData, Daten, Kontext, untergeordnete Elemente)
  }
}

Die Methode createFunctionalComponent erkennt und führt die eingehenden Daten zusammen, instanziiert den FunctionalRenderContext und ruft schließlich die benutzerdefinierte Rendermethode der Funktionskomponente auf, um den Rendervorgang durchzuführen.

Funktion createFunctionalComponent(
  Ctor, // Funktionaler Komponentenkonstruktor propsData, // An die Komponente übergebene Eigenschaften
  Daten, // Attr-Attribut, das vom Platzhalterkomponentenkontext übergeben wird, // Vue-Instanzkinder// untergeordneter Knoten){
  //Datenerkennung und -zusammenführung var options = Ctor.options;
  var Eigenschaften = {};
  var propOptions = Optionen.Props;
  wenn (isDef(propOptions)) {
    für (var Schlüssel in propOptions) {
      Requisiten [Schlüssel] = validierenProp (Schlüssel, Requisitoptionen, Requisitdaten || leeres Objekt);
    }
  } anders {
    //Attribute zusammenführen
    wenn (isDef(data.attrs)) { mergeProps(props, data.attrs); }
    // Requisiten zusammenführen
    wenn (isDef(data.props)) { mergeProps(props, data.props); }
  }
  var renderContext = neuer FunctionalRenderContext(Daten, Requisiten, Kinder, ContextVm, Ctor);
  // Rufen Sie die benutzerdefinierte Renderfunktion in der Funktionskomponente auf. var vnode = options.render.call(null, renderContext._c, renderContext)
}

Der ultimative Zweck der Klasse FunctionalRenderContext besteht darin, eine Rendermethode zu definieren, die sich vom eigentlichen Komponenten-Rendering unterscheidet.

Funktion FunctionalRenderContext() {
  //Andere Logik weglassen this._c = function (a, b, c, d) { return createElement(contextVm, a, b, c, d, needNormalization); };
}

Während der Ausführung der Renderfunktion wird die Methode createElement rekursiv aufgerufen. Zu diesem Zeitpunkt ist die Komponente bereits eine echte Komponente und beginnt mit der Ausführung des normalen Komponentenmontageprozesses.

Frage: Warum müssen funktionale Komponenten eine andere createElement-Methode definieren? - Der einzige Unterschied zwischen der Funktionskomponente createElement und den vorherigen ist der letzte Parameter. Wie im vorherigen Kapitel erwähnt, entscheidet createElement anhand des letzten Parameters, ob der untergeordnete Vnode abgeflacht werden soll. Im Allgemeinen sind die kompilierten Ergebnisse der untergeordneten Elemente vom Typ Vnode. Nur die Funktionskomponente ist etwas Besonderes. Sie kann ein Array zurückgeben. In diesem Fall ist eine Abflachung erforderlich. Schauen wir uns das folgende Beispiel an:

Vue.Komponente('test', {  
  funktional: wahr,  
  rendern: Funktion (createElement, Kontext) {  
    Kontext zurückgeben.Slots().Standard  
  }  
}) 

<Prüfung> 
     <p>Steckplatz1</p> 
     <p>Steckplatz</p> 
</Prüfung>

Zu diesem Zeitpunkt gibt die Renderfunktion des Funktionskomponententests den Vnode von zwei Slots zurück, der in Form eines Arrays vorliegt. Dies ist die Szene, die abgeflacht werden muss.

Um die Funktionskomponenten kurz zusammenzufassen: Wir können aus dem Quellcode ersehen, dass Funktionskomponenten nicht über den Prozess der Instanziierung von Komponenten wie gewöhnliche Komponenten verfügen, sodass es keine Prozesse wie Komponentenlebenszyklus und Komponentendatenverwaltung gibt. Es empfängt nur die an die Komponente übergebenen Daten unverändert zur Verarbeitung und rendert den erforderlichen Inhalt. Daher kann der Rendering-Overhead als reine Funktion erheblich reduziert werden.

Zusammenfassen

Damit ist dieser Artikel über die Nutzungsszenarien und die Quellcodeanalyse der erweiterten Komponenten und Funktionskomponenten von Vue abgeschlossen. Weitere relevante Inhalte zu den erweiterten Komponenten und Funktionskomponenten von Vue 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!