Vue.js 2.0 bringt Virtual DOM und neue Migrationsregeln

Das Vue.js-Projekt hat am 30. September 2016 Version 2.0 unter dem Namen „Ghost in the Shell“ veröffentlicht. Das JavaScript-Framework erhält eine neue Rendering-Schicht. Für bestehende Anwendungen dokumentiert das Projekt zugleich die notwendigen Anpassungen beim Wechsel von Version 1.x.

Der Virtual-DOM-Code von Vue.js 2.0 basiert auf Snabbdom. Statt sämtliche Änderungen unmittelbar an der Browser-Oberfläche auszuführen, arbeitet die Implementierung mit einer virtuellen Beschreibung der Knoten und überträgt daraus erforderliche Änderungen. Der Template-Optimierer erkennt außerdem statische Teilbäume. Diese müssen bei erneuten Renderdurchläufen nicht jedes Mal neu aufgebaut oder im Änderungsabgleich verarbeitet werden.

Bestehende Komponenten und Router prüfen

Die offizielle Migrationsanleitung für Vue 1.x beschreibt konkrete Unterschiede: Jede Komponente benötigt genau ein Wurzelelement. Mehrere nebeneinanderstehende Wurzelelemente müssen deshalb in einem gemeinsamen Element zusammengefasst werden. Anwendungen mit Vue Router benötigen dessen Version 2; eine neue Vue-Hauptversion lässt sich somit nicht unabhängig von sämtlichen Erweiterungen austauschen.

Das Projekt empfiehlt zunächst den Migration Helper, anschließend die Kontrolle der betroffenen Funktionen und vorhandener Tests. Die Anleitung warnt damit nicht vor einer vollständigen Neuentwicklung, verlangt aber eine Prüfung des tatsächlich verwendeten API-Umfangs. Die Versionsseite auf GitHub verknüpft Release und Migrationsdokumentation.

Für browserbasierte Werkzeuge betrifft Vue vor allem die Organisation reaktiver Oberflächen. Konva.js verwaltet dagegen Formen, Ebenen und Interaktionen auf einem HTML5-Canvas. Die Aufgaben unterscheiden sich: Eine Komponentenoberfläche kann etwa ein Werkzeugpanel strukturieren, während eine Canvas-Bibliothek die Zeichenfläche übernimmt. Ein schnelleres UI-Rendering ersetzt dabei keine Spiel- oder Grafikengine.

Weitere News

Weitere News

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein