O que é o padrão de arquitetura MVVM?

MVVM (Model-View-ViewModel) é um padrão arquitetónico que separa a interface do utilizador (View) e a lógica de negócio (Model) através de uma camada intermédia — ViewModel.

Componente	Descrição	Propósito
Model	Representa dados e regras de negócio.	Fornece dados, não depende da View nem do ViewModel.
View	Mostra a interface de utilizador.	É responsável pela visualização e interação com o utilizador.
ViewModel	Contém a lógica de apresentação, transmite dados do Model para a View.	Liga a View e o Model, contém comandos e propriedades para a View.

No MVVM, a ligação entre a View e o ViewModel é feita através de mecanismos de ligação de dados (data binding). A View "subscreve-se" às mudanças nas propriedades do ViewModel, e o ViewModel notifica a View dessas mudanças. A interação do utilizador com a View (por exemplo, clicar num botão) inicia a chamada de um comando no ViewModel.

Vantagens:

• Separação de responsabilidades: divide claramente a UI, a lógica de negócio e a lógica de apresentação.
• Testabilidade: o ViewModel é fácil de testar independentemente da View.
• Melhor manutenção: alterações numa parte do sistema afetam menos as outras.
• Desenvolvimento: os programadores de frontend e backend podem trabalhar em paralelo.

Exemplo de conceito de ligação de dados (pseudo-código):

// ViewModel
class CounterViewModel {
  count = 0; // propriedade observável

  increment() {
    this.count++; // dispara notificação de alteração
  }
}

// View (representação simplificada)
<button onclick="viewModel.increment()">+</button>
<span data-bind="textContent: viewModel.count"></span> // Liga o conteúdo do span ao viewModel.count