einer modernen Anzeigetafel am Bahnhof vergleichen, die sich automatisch und in Echtzeit aktualisiert, sobald sich ein Zug verspätet oder ein Gleis geändert wird – ganz ohne dass ein Mitarbeiter die Tafel händisch umstellen müsste
Was steckt dahinter?
Reaktivität ist eines der zentralen Konzepte von Vue.js und lässt sich am besten mit einer modernen Anzeigetafel am Bahnhof vergleichen, die sich automatisch und in Echtzeit aktualisiert, sobald sich ein Zug verspätet oder ein Gleis geändert wird – ganz ohne dass ein Mitarbeiter die Tafel händisch umstellen müsste. In einer reaktiven Anwendung führt eine Änderung an den zugrundeliegenden Daten automatisch dazu, dass sich auch die Benutzeroberfläche entsprechend aktualisiert, ohne dass Entwickler diesen Aktualisierungsprozess selbst manuell anstoßen müssten. Vor der Verbreitung solcher reaktiven Frameworks mussten Entwickler bei klassischem JavaScript jede einzelne Änderung an der Anzeige selbst und explizit programmieren: Ändert sich ein Wert, muss man manuell das entsprechende HTML-Element suchen und dessen Inhalt aktualisieren. Vue übernimmt diese Aufgabe vollständig automatisch im Hintergrund – Entwickler ändern lediglich die zugrundeliegende Variable, und Vue sorgt dafür, dass sich alle betroffenen Stellen der Benutzeroberfläche, die von dieser Variable abhängen, korrekt und sofort aktualisieren. Diese Automatisierung reduziert nicht nur den Schreibaufwand erheblich, sondern auch eine ganze Klasse typischer Programmierfehler, bei denen Entwickler vergessen, eine bestimmte Stelle der Anzeige nach einer Datenänderung manuell zu aktualisieren, was zu inkonsistenten, veralteten Anzeigen führen würde. In Vue 3 wird Reaktivität technisch über sogenannte “Proxies” realisiert, ein in modernem JavaScript verfügbares Sprachmittel, das Änderungen an Objekten transparent abfangen und entsprechend reagieren kann.