Was ist das MVVM-Architekturmuster?

MVVM (Model-View-ViewModel) ist ein Architektur-Muster, das den Code so strukturiert, dass die Anwendungslogik in drei miteinander verbundene Komponenten aufgeteilt wird:

• Model: Repräsentiert Daten und Geschäftslogik. Es ist UI-unabhängig.
• View: Zeigt die Daten des ViewModels an und sendet Benutzeraktionen (z.B. Klicks) an das ViewModel. Die View ist passiv und enthält keine Datenverarbeitungslogik.
• ViewModel: Dient als Vermittler zwischen Model und View. Es stellt die Daten des Models in einem für die Anzeige geeigneten Format bereit und verarbeitet Benutzeraktionen, indem es das Model aktualisiert. Das ViewModel nutzt häufig Mechanismen der Datenbindung (data binding), um die View bei Datenänderungen automatisch zu aktualisieren.

Wichtige Prinzipien:

• Zweiweg-Datenbindung: Änderungen im ViewModel spiegeln sich automatisch in der View wider und umgekehrt (unter Verwendung entsprechender Werkzeuge).
• Testbarkeit: Das ViewModel ist leicht isoliert testbar, da es nicht an die UI gebunden ist.
• Verantwortlichkeitsaufteilung: Klare Trennung von Präsentationslogik, Daten und Geschäftslogik erleichtert Entwicklung und Wartung.

Wird häufig in Anwendungen mit deklarativer UI verwendet, wie Vue.js, React (mit einigen Variationen), Angular.

Beispiel für eine einfache Struktur:

// Model
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// ViewModel
class UserViewModel {
  constructor(user) {
    this.user = user;
    this.displayName = `${user.name} (${user.age})`;
  }

  incrementAge() {
    this.user.age++;
    this.displayName = `${this.user.name} (${this.user.age})`; // Aktualisiert displayName für die View
  }
}

// View (ungefähr, wie es in einem deklarativen Framework aussehen könnte)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Alter erhöhen</button>
  </div>
</template>

<script>
import { User } from './model';
import { UserViewModel } from './viewModel';

export default {
  data() {
    return {
      userViewModel: new UserViewModel(new User('Ivan', 30))
    };
  }
}
</script>
*/