Mi az az MVVM architektúrális minta?

Az MVVM (Model-View-ViewModel) egy architekturális minta, amely a kód szerkezetét három összefüggő komponensre bontja:

• Model: Az adatok és az üzleti logika reprezentációja. Nem függ a felhasználói felülettől.
• View: A ViewModel-ből származó adatokat jeleníti meg, és a felhasználói műveleteket (pl. kattintásokat) továbbítja a ViewModel-nek. A View passzív, és nem tartalmaz adatfeldolgozó logikát.
• ViewModel: Közvetítőként működik a Model és a View között. A Model adatait olyan formátumban szolgáltatja, amely alkalmas a megjelenítésre, és feldolgozza a felhasználói műveleteket, frissítve a Modelt. A ViewModel gyakran használ adat kötést (data binding), hogy az adatok változásakor automatikusan frissítse a View-t.

Fő elvek:

• Kétirányú adat kötés: A ViewModel-ben történt változások automatikusan tükröződnek a View-ban, és fordítva (megfelelő eszközök használatával).
• Tesztelhetőség: A ViewModel könnyen tesztelhető izoláltan, mivel nem kötött a UI-hoz.
• Felelősségek szétválasztása: A megjelenítési logika, az adatok és az üzleti logika világos szétválasztása megkönnyíti a fejlesztést és a karbantartást.

Gyakran használják deklaratív UI-vel rendelkező alkalmazásokban, mint például Vue.js, React (néhány variációval), Angular.

Egyszerű szerkezet példája:

// 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})`; // A displayName frissítése a View számára
  }
}

// Nézet (körülbelül, ahogyan egy deklaratív keretrendszerben kinézhet)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Kor növelése</button>
  </div>
</template>

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

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