Что такое архитектурный паттерн MVVM?

Паттерн MVVM (Model-View-ViewModel) разделяет приложение на три основные части:

• Model: Представляет данные и бизнес-логику. Она не зависит от пользовательского интерфейса.
• View: Это слой пользовательского интерфейса. Он отображает данные из ViewModel и отправляет действия пользователя в ViewModel. View не содержит логики обработки данных.
• ViewModel: Связующее звено между View и Model. Он предоставляет данные из Model в удобном для View формате и обрабатывает действия пользователя, обновляя Model. ViewModel содержит логику представления данных и обработки пользовательского ввода.

Связи между компонентами обычно реализуются через биндинги данных. View наблюдает за изменениями в ViewModel и обновляется автоматически, а ViewModel может реагировать на события из View.

// Пример представления ViewModel (условный JavaScript)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Предоставляет данные для View
    this.newTodoText = ''; // Состояние для поля ввода в View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Очищаем поле после добавления
    }
  }

  removeTodo(index) {
    this.model.removeTodo(index);
  }
}