Warum verwendet Vue.js einen VDOM?

Question

, verwendet es einen VDOM unter der Haube, um die Benutzeroberfläche zu rendern. Aus meiner Sicht wurde der VDOM hauptsächlich erfunden, um "verfolgte Abhängigkeiten" zu vermeiden. Mit einem VDOM ist es möglich, größere Teile der Anwendung abzustimmen, ohne zu wissen, was genau sich geändert hat. Als Ergebnis kann man einfache Objekte und Arrays verwenden, um die Ansicht zu beschreiben, und muss nur das Framework über eine Änderung informieren (wie setState in React). Dann werden beide VDOM-Bäume verglichen und der minimale Satz erforderlicher Änderungen wird auf das reale DOM angewendet.

Vue.js verwendet auf der anderen Seite verfolgte Abhängigkeiten. Es weiß genau, was sich geändert hat, so dass es möglich wäre, DOM-Bindungen zu verwenden. Da die meisten Vue.js-Benutzer die Templating-Sprache bereits verwenden, profitiert sie nicht wirklich von der größeren Flexibilität, die ein VDOM bietet. Warum entschied sich Evan für einen VDOM?

Answer 1

Diese Designentscheidung hat mehrere Aspekte.

1. Wartbarkeit und Flexibilität. Direkte DOM-Bindungen (wie in Vue 1.x) sind zwar effizient und unkompliziert für einzelne Bindungen, aber nicht so sehr, wenn Listen betroffen sind. Es wird noch komplizierter, wenn die Zusammensetzung involviert ist (z. B. der Schlitzmechanismus). Für jede Art von solchen Merkmalen (die die Zusammensetzung von Fragmenten beinhaltet) muss spezieller zustandsbehafteter Code geschrieben werden und sie können sich gegenseitig beeinflussen, wodurch das System schwerer zu warten wird. Die Verwendung eines VDOM trennt die eventuellen DOM-Manipulationen sauber von der Feature-Schicht - der Feature-Code funktioniert nun, indem VNodes deklarativ zusammengesetzt werden, was die Pflege und das Hinzufügen neuer Features wesentlich erleichtert.

   Darüber hinaus kann diese Flexibilität von VDOM Benutzern auch dadurch zugänglich gemacht werden, dass sie die Vorlage umgehen und Renderfunktionen direkt erstellen können.

2. VDOM Diffing ist nicht frei - in der Tat könnte es ziemlich teuer, wenn Sie setState() an der Wurzel eines großen Komponentenbaums. Aus diesem Grund müssen Sie in React PureComponent verwenden oder shouldComponentUpdate implementieren, um einen Teil des Komponentenbaums zu umgehen. Mit einem Dep-Tracking-System können wir die Komponenten, die aktualisiert werden müssen, automatisch und genauer erkennen, so dass selbst VDOM von einem Dep-Tracking-System profitieren kann.

3. Abhängigkeitsverfolgung hat auch ihre Kosten - für jede Bindung muss Speicher für verfolgte Abhängigkeiten zugewiesen werden. Super-feinkörnige Bindungen bedeuten, dass es in einer App Tausende von reaktiven Beobachtern geben wird, was zu einer zusätzlichen Speichernutzung führt. Wie detailliert das Tracking-System sein sollte, hängt davon ab, welche Art von Apps wir erstellen. Basierend auf der Beobachtung typischer App-Strukturen verwendet Vue 2 eine etwas "mittelkörnige" Strategie, indem Abhängigkeiten für jede Komponente verfolgt werden, wodurch jede Komponente zu einer reaktiven Update-Grenze wird.

So - die Kombination der zwei Arten von wir die Vorteile von beiden Seiten bekommen :)