© GoodStudio/Shutterstock.com
Advanced Vue - Teil 3

Anatomie einer Vue-Komponente


Auf wie viele verschiedene Arten kann ich eine Vue-Komponente entwickeln und warum sollte ich das tun? Wie funktioniert der Template Compiler? Kann ich meine Komponenten auch mit JSX realisieren und was sind Render-Funktionen? Viele Fragen, denen der vorliegende Artikel auf den Grund geht.

Obwohl der Begriff „Anatomie“ dem medizinischen Kontext entspringt, passt er auch sehr gut zu diesem Artikel. Bei Anatomie geht es um Wissensgewinn durch Analyse, Dekomposition und Durchleuchtung der zu erforschenden Sache. In Rahmen dieses Texts sollen Vue-Komponenten auseinandergenommen und die Funktionsweise von Vue soll nach außen sichtbar gemacht werden. Ziel dabei ist, dass der Leser zu Erkenntnissen gelangt, die bei der Entwicklung eigener Anwendungen helfen, sei es durch ein generelles, besseres Verständnis des Innenlebens von Vue oder durch den zusätzlichen Wissensgewinn hinsichtlich der unterschiedlichen Möglichkeiten, eine Vue-Komponente aufzubauen.

Einsteiger machen ihre erste Bekanntschaft mit Vue oft, indem man ihnen zeigt, wie man Vue in bestehende Projekte einbindet und wie vorhandenes Markup mit Vue angereichert werden kann. Listing 1 zeigt ein kleines Beispiel. Die neueste Vue-3-Version wird hier über den Link https://unpkg.com/vue@next geladen und steht somit im Projekt zur Verfügung. In Wirklichkeit ist dieser Link jedoch eine Weiterleitung und zeigt standardmäßig auf den globalen, vollständigen Build von Vue. Das kann man leicht prüfen, wenn man den Link direkt im Browser eingibt. Von Vue gibt es mehrere Builds:

  • vue.global.js

  • vue.runtime.global.js

  • vue.esm-browser.js

  • vue.runtime.esm-browser.js

Die ersten beiden Builds stellen alle Funktionen von Vue mit einem globalen Vue-Objekt zur Verfügung. Die nachfolgenden Dateien (*.esm-browser.js) sind für die Verwendung mit dem Modulsystem (ESM) gedacht. Wenn man mit einem Bundler oder Entwicklungswerkzeug wie Vue CLI oder Vite arbeitet, muss man als Entwickler nicht entscheiden, welche Variante eingebunden werden soll, das erfolgt automatisch im Hintergrund. Wenn man ohne Entwicklungswerkzeuge arbeitet und Vue direkt als Library verwenden möchte, muss man sich dagegen für eine der beiden Optionen entscheiden: global oder ESM.

Listing 1: Bestehendes Markup mit Vue „anreichern“ (Achtung: Falle!)

<!doctype html> <html lang="en"> <head> <script src="https://unpkg.com/vue@next"></script> <title>Listing 1</title> </head> <body> <div id="counter"> <h1>Counter: {{ counter }}</h1> </div> </body> <script> const Co...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang