Für eine Vue-App ist es gängige Praxis, das DOM als Template zu verwenden. Ursächlich dafür ist das recht unkomplizierte SetUp, um die Architektur einzurichten.
Diese Praxis ist mit einigen Problemen verbunden. Deshalb wird sie häufig in ernsthaften Projekten nicht eingesetzt. So ist z.B. das Markup, das Sie für ein DOM-Template schreiben, nicht immer das, was Sie erhalten, wenn Ihre App läuft.
In diesem Artikel werden wir die Probleme bei der Verwendung des DOM als Template erläutern und einige Alternativen vorstellen.
DOM als Template.
Die el Option wird verwendet, um eine Vue-Instanz an ein Element im DOM zu hängen. Wenn kein Template oder keine Renderoption vorhanden ist, verwendet Vue alle vorhandenen Inhalte innerhalb des Montageelements als Template.
Dieser Ansatz ist schnell, aber die folgenden Gründe sprechen gegen einen Einsatz:
- Das Markup, in das Sie schreiben, ist nicht immer das, was Sie bekommen.
- Syntaxkonflikte mit serverseitigem Rendering.
- Inkompatibilität mit serverseitigem Rendering.
- Die Kompilierung der Runtime-Templates ist erforderlich.
Markup !=DOM.
Lassen Sie uns eine Unterscheidung zwischen Markup und DOM machen. Markup ist das HTML, das Sie schreiben. Der Browser analysiert das anschließend und transformiert es in das DOM.
Vue verwendet das DOM als Template und nicht das Markup, das Sie schreiben. Warum ist das ein Problem? Der DOM-Parser und Vue stimmen nicht immer in der Frage überein, was ein akzeptabler Markup ist. Nicht standardmäßige Markups können geändert oder von der Seite entfernt werden, was zu unvorhersehbaren Ergebnissen führt.
Beispielsweise können Sie eine benutzerdefinierte Komponente my-row haben, die als tr gerendert wird und folgendermaßen verwendet wird:
Da nur tr innerhalb einer Tabelle erlaubt ist, hebt der Browser das my-row-Element während des Parsen des Dokuments über die Tabelle. Wenn Vue läuft bekommen Sie Folgendes:
Es existieren auch nützliche Nicht-Standard-Funktionen für Vue-Templates, die der DOM-Parser ausblendet:
Selbstsschließende Tags: Wenn ihre Komponente keinen Slot benötigt, können Sie mit Vue ein selbstschließendes Element daraus machen.
Non-kebab-cased Komponenten: HTML ist case-insensitive, was bedeutet, dass Sie auf Kebab-Case-Fallkomponenten im Template beschränkt sind. Vue akzeptiert jedoch gerne camelCase oder PascalCase. Das Gleiche gilt für die Props.
Keines dieser Probleme tritt auf, wenn Sie String Templates (oder Renderfunktionen) verwenden, da der DOM-Parser dort kein Faktor ist.
Zielkonflikt mit Templating-Engines.
Wenn Sie Vue.js in Verbindung mit einer Templating-Engine verwenden, kann jede gängige Syntax problematisch sein.
Zum Beispiel verwenden Lenker und Laravel Blade beide die doppelte geschweifte Klammer {{{}}} Syntax, die Vue verwendet. Wenn Ihr Template verarbeitet wird, kann die Templating-Engine die Vue-Syntax nicht unterscheiden, was zu einem Problem führt.
Dies ist normalerweise leicht zu umgehen, indem man die Vue-Syntax vermeidet. So kann man z.B. in Blade ein @ vor die Klammern setzen und Blade wird wissen, dass es sie ignorieren soll (z.B. @ {{{}}}). Es hat aber das Potenzial, Sie zu ärgern.
Serverseitiges Rendering.
Sie können ganz einfach keine DOM-Templates verwenden, wenn Sie Ihre Vue-App serverseitig rendern wollen, da das HTML-Dokument kein Input des SSR-Prozesses ist.
Vermeidung von DOM-Templates.
Wie kann man eine Vue.js-App ohne oder mit einem kleinen DOM-Template erstellen?
- Abstraktes Markup auf Komponenten.
Ihre Root-Instance kann einen Zustand haben, aber im Allgemeinen möchten Sie, dass jede Präsentationslogik und jedes Markup auf Komponenten abstrahiert wird, so dass sie sich außerhalb Ihres DOM-Templates befindet.
Einzelne Komponenten sind die beste Wahl. Wenn Sie keinen Build-Schritt in Ihr Projekt aufnehmen können und Ihre Templates nicht gerne als JavaScript-Strings schreiben, können Sie x-templates ausprobieren.
X-Templates.
Bei x-Templates ist Ihr Template noch in der Seite, aber innerhalb eines Skript-Tags definiert und wird aus diesem Grund nicht vom DOM-Parser verarbeitet. Das Skript-Tag wird mit text/x-template markiert und durch eine ID in Ihrer Komponentendefinition referenziert.
- Einbinden in einen leeren Node mit einer Renderfunktion.
Das Abstrahieren von Markup in Komponenten trifft auf eine Wand, wenn Sie feststellen, dass Sie Ihre Root-Level-Komponente noch im DOM-Template deklarieren müssen.
Wenn Sie Ihr DOM-Template vollständig eliminieren möchten, können Sie Ihre Root-Level-Komponenten mit einer Renderfunktion mounten.
Nehmen wir an, Sie haben eine allumfassende Komponente, die die anderen Komponenten als App deklariert. Die App kann mit einer Renderfunktion deklariert und an einen leeren Node montiert werden, da Renderfunktionen ihr Mount-Element ersetzen.
Und damit ist Ihre App frei von jeglichen DOM-Templates.
Wenn Sie alle Zeichenketten- und DOM-Templates aus Ihrer Anwendung entfernen können, sollten Sie den kleineren Runtime-only-Build von Vue verwenden. Dies ist eine ideale Projektarchitektur und diejenige, die Sie in vue-cli-Templates sehen werden.
Zusammenfassung.
- DOM-Templates sind problematisch, da der DOM-Parser mit Ihrem Markup zu Problemen führen kann. Es gibt auch Potenzial für Konflikte mit Templating-Engines und Inkompatibilität mit serverseitigem Rendering.
- Um Ihr DOM-Template zu minimieren, abstrahieren Sie Ihr Markup in Komponenten.
- Um Ihr DOM-Template vollständig zu eliminieren, müssen Sie Ihre Root-Level-Komponente mit einer Renderfunktion mounten.
Vielen Dank für Ihren Besuch.
Leave A Comment