O que é o padrão de arquitetura MVVM?

O MVVM (Model-View-ViewModel) é um padrão arquitetónico que estrutura o código para dividir a lógica da aplicação em três componentes interligados:

• Model: Representa os dados e a lógica de negócio. Não depende da interface de utilizador.
• View: Mostra os dados do ViewModel e envia ações do utilizador (por exemplo, cliques) ao ViewModel. A View é passiva e não contém lógica de processamento de dados.
• ViewModel: Atua como intermediário entre o Model e a View. Fornece dados do Model num formato adequado para visualização e processa as ações do utilizador, atualizando o Model. O ViewModel frequentemente usa mecanismos de ligação de dados (data binding) para atualizar automaticamente a View quando os dados mudam.

Princípios-chave:

• Ligação bidirecional de dados: As alterações no ViewModel refletem-se automaticamente na View, e vice-versa (usando as ferramentas apropriadas).
• Testabilidade: O ViewModel é fácil de testar isoladamente, pois não está ligado à interface de utilizador.
• Separação de responsabilidades: A separação clara da lógica de apresentação, dados e lógica de negócio simplifica o desenvolvimento e manutenção.

É frequentemente utilizado em aplicações com UI declarativa, como Vue.js, React (com algumas variações), Angular.

Exemplo de estrutura mais simples:

// Modelo
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})`; // Atualiza displayName para a View
  }
}

// View (aproximadamente, como poderia parecer num framework declarativo)
/*
<template>
  <div>
    <p>{{ userViewModel.displayName }}</p>
    <button @click="userViewModel.incrementAge()">Aumentar idade</button>
  </div>
</template>

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

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