Was ist der Unterschied zwischen dem abstrakten Syntaxbaum von Vue und dem virtuellen Dom?

Der Unterschied zwischen dem abstrakten Syntaxbaum von Vue und dem virtuellen Dom: 1. Der abstrakte Syntaxbaum bezieht sich auf eine abstrakte Darstellung der Quellcode-Syntaxstruktur, während der virtuelle Dom im Wesentlichen ein gewöhnliches JS-Objekt ist, das zur Beschreibung der Schnittstellenstruktur der Ansicht verwendet wird Virtuelles DOM ist eine abstrakte Darstellung des realen DOM in Form von Objekten, während der abstrakte Syntaxbaum eine abstrakte Darstellung der Syntaxstruktur ist.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue3-Version, Dell G3-Computer.

Was ist der Unterschied zwischen dem abstrakten Vue-Syntaxbaum und dem virtuellen Dom?

Virtual Dom ist im Wesentlichen ein gewöhnliches JS-Objekt, das zur Beschreibung der Schnittstellenstruktur der Ansicht verwendet wird. In Vue verfügt jede Komponente über eine Renderfunktion, und jede Renderfunktion gibt einen virtuellen Dom-Baum zurück. Dies bedeutet, dass jede Komponente korrespondiert zu einem virtuellen DOM-Baum

Warum brauchen wir virtuelles DOM?

In Vue wird beim Rendern der Ansicht die Renderfunktion aufgerufen. Dieses Rendern erfolgt nicht nur, wenn die Komponente erstellt wird, sondern auch, wenn die Daten, von denen die Ansicht abhängt, aktualisiert werden. Wenn Sie beim Rendern das echte DOM direkt verwenden, führen das Erstellen, Aktualisieren, Einfügen und andere Vorgänge des echten DOM zu großen Leistungsverlusten, was die Rendering-Effizienz erheblich verringert.

Daher verwendet Vue beim Rendern den virtuellen Dom, um den realen Dom zu ersetzen, hauptsächlich um das Problem der Rendering-Effizienz zu lösen.

Abstrakter Syntaxbaum

In der Informatik ist Abstract Syntax Tree (AST), oder kurz Syntaxbaum, eine Art abstrakte Darstellung der Quellcode-Syntaxstruktur. Es drückt die grammatikalische Struktur der Programmiersprache in Form eines Baums aus. Jeder Knoten im Baum stellt eine Struktur im Quellcode dar:

Virtual Dom und Ast sind beide abstrakte Syntaxbäume Als ich mit dem Lernen begann, habe ich die beiden Konzepte oft verwechselt. Beide verwenden Objekte zur abstrakten Darstellung, aber Virtual Dom ist eine abstrakte Darstellung des realen Doms in Form von Objekten, während Ast eine abstrakte Darstellung grammatikalischer Strukturen ist.

Der Endpunkt des abstrakten Syntaxbaums ist die Rendering-Funktion (h-Funktion).

Rendering-Funktion (h-Funktion), die sowohl das Produkt von AST als auch der Ursprung von vnode (virtueller Knoten) ist. Die h-Funktion enthält keine Anweisungen.

Der abstrakte Syntaxbaum führt keinen Diff-Algorithmus aus und der abstrakte Syntaxbaum generiert nicht direkt virtuelle Knoten. Der abstrakte Syntaxbaum generiert letztendlich die Rendering-Funktion[Verwandte Empfehlung: „vue.js-Tutorial

“]

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen dem abstrakten Syntaxbaum von Vue und dem virtuellen Dom?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!