Rendern im Vue-Scaffolding verstehen

Im Vue-Gerüst können wir sehen, dass im neuen Vue-Code in der Eintragsdatei main.js ein Code-Render vorhanden ist: h=>h(App);

Dieser Code ist nicht wie der Code, den wir normalerweise bei Verwendung von Vue verwenden. Ich werde den allgemeinen Vue-Code schreiben

	importiere Acomponent aus "../Acomponent"
	vm = neuer Vue({
		el:"#app"
		Daten(){
			zurückkehren {
				ein:"aaa",
				b:"bbb"
			}
		},
		Vorlage:`<div>
			<span>Dies ist ein Test</span>
			<Eine Komponente></Eine Komponente>
		</div>`,
		Komponenten: {
			Eine Komponente
		}
	})

Der obige Code ist der Code, den wir normalerweise verstehen können. Es gibt eine Vorlage, und andere Komponenten können in die Vorlage eingefügt werden. Aber warum gibt es im Gerüst eine Rendermethode?

Nach unseren eigenen Vorstellungen können wir den Gerüstcode ändern, um zu sehen

Starten Sie das Gerüst, führen Sie npm run serve aus und überprüfen Sie das Ergebnis. Ein Fehler wird gemeldet. Die Informationen lauten wie folgt

Wir können also sagen, dass das durch das Gerüst eingeführte Vue ein Vue ohne Vorlagenparser ist. Wenn Sie die Vorlage analysieren möchten, müssen Sie die Renderfunktion verwenden, um zum Ordner node_modules des Projekts zu gelangen und zu sehen, welches Vue wir eingeführt haben.

Vue von „vue“ importieren 

Wir öffnen die vue/dist-Datei und sehen viele Dateien, wie in der Abbildung gezeigt

Die Fehlermeldung besagt, dass wir das Problem auf zwei Arten lösen können: Zum einen durch die Einführung des vollständigen vue.js und zum anderen durch die Verwendung von Render.
Importieren wir die Vollversion und prüfen wir, ob das Problem dadurch gelöst werden kann.

Schauen wir uns den zweiten an, der Vue ohne Template-Parser mit Render einführt,
Lassen Sie uns zuerst über ein Rendering sprechen
Render ist eine Funktion mit einem Parameter, die zum Erstellen eines Knotens verwendet wird.

Durch console.log können wir sehen, dass der Parameter createElement auch eine Funktion ist, die ein VNode-Objekt erstellt

Als nächstes verwenden wir Pfeilfunktionen, um das Rendern zu vereinfachen

	rendern(Element erstellen){
		returniere Element erstellen("h1","123");
	}
	//Verwenden Sie Pfeilfunktionen, um das Rendern zu vereinfachen: (createElement)=> {return createElement("h1","123")}
	// Die Pfeilfunktion hat nur einen Parameter, Sie müssen also keine Klammern schreiben. Wenn der Methodenkörper nur eine Zeile enthält, müssen Sie keine geschweiften Klammern schreiben und für den Rückgabewert kein „return“ schreiben.
	//Der obige Code kann also wie folgt vereinfacht werden: render:createElemnet=>crementElement("h1","123")
	// Ähnlich wie bei der ursprünglichen Anpassung von createElement können wir auch den Namen rendern: h=>h("h1","123") ändern.
	//Dies ist dem Code im Gerüst sehr ähnlich. In der h-Funktion wird es, wenn es sich um ein natives HTML-Tag handelt, so geschrieben. Wenn es sich um eine Vue-Komponente handelt, kann es direkt übergeben werden. Alles, was wir haben, ist render:h=>h(App)

So wird Render geschrieben

Lassen Sie uns darüber sprechen, warum das Gerüst einen unvollständigen Vue zur Verwendung einführt. Wir wissen, dass der Vue-Code nach Fertigstellung verpackt werden muss und der Kerncode von Vue unverzichtbar ist. Nachdem wir ihn verpackt haben, müssen wir die Vorlage nicht erneut analysieren. Dann wird der Vorlagenparser im Kerncode von Vue überhaupt nicht benötigt. Um die Größe des Codes zu reduzieren, hat Vue daher den Vorlagenparser entfernt, aber wenn wir ihn entwickeln, müssen wir ihn erneut verwenden, also erstellen wir eine Rendermethode zum Parsen der Vorlage.
Kurz gesagt besteht sein Zweck darin, den gepackten Code so klein wie möglich zu halten.

Dies ist das Ende dieses Artikels zum Verständnis von Rendern im Vue-Scaffolding. Weitere relevante Inhalte zum Verständnis von Vue-Rendern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!