Какво е архитектурният модел MVVM?

MVVM (Model-View-ViewModel) е архитектурен шаблон, който структурира кода, за да раздели логиката на приложението на три взаимосвързани компонента:

• Model: Представлява данните и бизнес логиката. Не зависи от UI.
• View: Показва данните от ViewModel и изпраща действия на потребителя (например кликвания) към ViewModel. View е пасивна и не съдържа логика за обработка на данни.
• ViewModel: Действа като посредник между Model и View. Предоставя данните от Model във формат, подходящ за показване, и обработва действията на потребителя, актуализирайки Model. Често използва механизми за обвързване на данни (data binding), за да актуализира автоматично View при промени в данните.

Ключови принципи:

• Двупосочно обвързване на данните: Промените във ViewModel се отразяват автоматично във View и обратно (с помощта на съответните инструменти).
• Тестируемост: Лесно е да се тества изолирано, тъй като не е свързано с UI.
• Разделяне на отговорностите: Ясното разделение на логиката за представяне, данните и бизнес логиката улеснява разработката и поддръжката.

Обикновено се използва в приложения с декларативен UI, като Vue.js, React (с някои вариации), Angular.

Пример за най-проста структура:

// 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})`; // Обновяване на displayName за View
  }
}

// View (приблизително, как би изглеждало в декларативен framework)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Увеличи възрастта</button>
  </div>
</template>

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

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