O que é o padrão de arquitetura MVVM?

O padrão MVVM (Model-View-ViewModel) divide a aplicação em três partes principais:

• Model: Representa os dados e a lógica de negócio. Não depende da interface de utilizador.
• View: É a camada de interface de utilizador. Mostra os dados do ViewModel e envia as ações do utilizador ao ViewModel. A View não contém lógica de processamento de dados.
• ViewModel: É o elo de ligação entre a View e o Model. Fornece os dados do Model num formato conveniente para a View e processa as ações do utilizador, atualizando o Model. O ViewModel contém a lógica de apresentação e de tratamento de entrada do utilizador.

As ligações entre componentes são geralmente implementadas através de ligações de dados. A View observa as mudanças no ViewModel e atualiza-se automaticamente, e o ViewModel pode reagir a eventos da View.

// Exemplo de ViewModel (JavaScript condicional)
class TodoViewModel {
  constructor(model) {
    this.model = model;
    this.todos = this.model.todos; // Fornece dados para a View
    this.newTodoText = ''; // Estado para o campo de entrada na View
  }

  addTodo() {
    if (this.newTodoText.trim()) {
      this.model.addTodo(this.newTodoText.trim());
      this.newTodoText = ''; // Limpa o campo após adicionar
    }
  }

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