MVVM
Model · View · ViewModel

// Controller — doit mettre à jour le DOM manuellement
let compteur = 0;

function incrementer() {
  compteur++;
  // Mettre à jour MANUELLEMENT le DOM
  document.getElementById('affichage').textContent = compteur;
  document.getElementById('double').textContent = compteur * 2;
  document.getElementById('btn').disabled = compteur >= 10;
  // ... oublier une mise à jour = bug difficile à trouver
}

<!-- HTML -->
<span id="affichage">0</span>
<span id="double">0</span>
<button id="btn" onclick="incrementer()">+1</button>

// ViewModel — exposer des données réactives
// <script setup>
import { ref, computed } from 'vue';

const compteur = ref(0);               // donnée réactive
const double   = computed(() => compteur.value * 2); // dérivée auto
const maxAtteint = computed(() => compteur.value >= 10);

function incrementer() {
  compteur.value++;
  // C'est tout ! La View se met à jour seule.
}

<!-- View — template Vue -->
<span>{{ compteur }}</span>
<span>{{ double }}</span>
<button @click="incrementer" :disabled="maxAtteint">+1</button>

<!-- 1. Interpolation — ViewModel → View (one-way) -->
<p>{{ message }}</p>
<p>{{ prix.toFixed(2) }} €</p>

<!-- 2. Binding d'attribut — : est un raccourci de v-bind -->
<img :src="urlImage" :alt="titre">
<button :disabled="chargement">Envoyer</button>
<div :class="{ actif: estActif, erreur: aErreur }"></div>

<!-- 3. Événements — @ est un raccourci de v-on -->
<button @click="sauvegarder">Sauver</button>
<input @input="rechercherEnTempsReel">
<form @submit.prevent="soumettre">

<!-- 4. Two-way binding — v-model (View ↔ ViewModel) -->
<input v-model="nom">        <!-- saisie → ViewModel auto -->
<textarea v-model="bio"></textarea>
<select v-model="categorie">...</select>
<input type="checkbox" v-model="accepte">

<!-- 5. Directives de structure -->
<p v-if="estConnecte">Bienvenue !</p>
<p v-else>Connectez-vous</p>
<li v-for="article in articles" :key="article.id">
  {{ article.titre }}
</li>

import { useState, useMemo } from 'react';

function Formulaire() {
  // ViewModel = state + handlers du composant
  const [nom, setNom]       = useState('');
  const [articles, setArticles] = useState([]);
  const [chargement, setChargement] = useState(false);

  // computed → useMemo en React
  const nomMaj = useMemo(() => nom.toUpperCase(), [nom]);

  return (
    {/* View = JSX */}
    <div>
      {/* two-way binding manuel en React */}
      <input value={nom} onChange={e => setNom(e.target.value)} />
      <p>{nomMaj}</p>
      <button disabled={chargement}>Envoyer</button>
      <ul>
        {articles.map(a => (
          <li key={a.id}>{a.titre}</li>
        ))}
      </ul>
    </div>
  );
}

<!-- ArticleList.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue';
import { api } from '../services/api';  // ← Model (API)

// --- ViewModel : données réactives ---
const articles    = ref([]);
const recherche   = ref('');
const chargement  = ref(true);
const erreur      = ref(null);

// Données dérivées — recalculées automatiquement
const articlesFiltres = computed(() =>
  articles.value.filter(a =>
    a.titre.toLowerCase().includes(recherche.value.toLowerCase())
  )
);
const nbResultats = computed(() => articlesFiltres.value.length);

// --- Actions ---
async function chargerArticles() {
  try {
    articles.value = await api.get('/articles'); // ← Model
  } catch (e) { erreur.value = e.message; }
  finally    { chargement.value = false; }
}

async function supprimer(id) {
  await api.delete(`/articles/${id}`);
  articles.value = articles.value.filter(a => a.id !== id);
}

onMounted(chargerArticles); // charger au montage
</script>

<template>
  <!-- La View observe le ViewModel -- aucun code JS ici -->

  <div v-if="chargement">Chargement...</div>
  <div v-else-if="erreur">Erreur : {{ erreur }}</div>

  <div v-else>
    <!-- Two-way binding : recherche ↔ input -->
    <input v-model="recherche" placeholder="Filtrer...">
    <p>{{ nbResultats }} résultats</p>

    <!-- Liste réactive -->
    <article
      v-for="article in articlesFiltres"
      :key="article.id"
    >
      <h3>{{ article.titre }}</h3>
      <button @click="supprimer(article.id)">
        Supprimer
      </button>
    </article>
  </div>
</template>

// hooks/useArticles.js — ViewModel isolé
import { useState, useEffect, useMemo } from 'react';

export function useArticles() {
  // État réactif (comme ref() de Vue)
  const [articles, setArticles]   = useState([]);
  const [recherche, setRecherche] = useState('');
  const [chargement, setChargement] = useState(true);

  // computed → useMemo
  const articlesFiltres = useMemo(() =>
    articles.filter(a =>
      a.titre.toLowerCase().includes(recherche.toLowerCase())
    ),
    [articles, recherche]
  );

  // onMounted → useEffect
  useEffect(() => {
    fetch('/api/articles')
      .then(r => r.json())
      .then(setArticles)
      .finally(() => setChargement(false));
  }, []);

  const supprimer = (id) => {
    fetch(`/api/articles/${id}`, { method: 'DELETE' });
    setArticles(prev => prev.filter(a => a.id !== id));
  };

  // Exposer au composant View
  return { articles: articlesFiltres, recherche, setRecherche,
             chargement, supprimer };
}

// components/ArticleList.jsx — View pure
import { useArticles } from '../hooks/useArticles';

export function ArticleList() {
  // Le composant est la View — il consomme le ViewModel
  const { articles, recherche, setRecherche,
          chargement, supprimer } = useArticles();

  if (chargement) return <p>Chargement...</p>;

  return (
    <div>
      <input
        value={recherche}
        onChange={e => setRecherche(e.target.value)}
        placeholder="Filtrer..."
      />
      {articles.map(a => (
        <article key={a.id}>
          <h3>{a.titre}</h3>
          <button onClick={() => supprimer(a.id)}>
            Supprimer
          </button>
        </article>
      ))}
    </div>
  );
}

from PyQt6.QtCore import QObject, pyqtSignal, pyqtProperty

# Model — données
class CompteurModel:
    def __init__(self): self.valeur = 0
    def incrementer(self): self.valeur += 1

# ViewModel — expose les données + notifie la View
class CompteurViewModel(QObject):
    valeurChangee = pyqtSignal(int)  # signal réactif

    def __init__(self):
        super().__init__()
        self._model = CompteurModel()

    @pyqtProperty(int, notify=valeurChangee)
    def valeur(self): return self._model.valeur

    def incrementer(self):
        self._model.incrementer()
        self.valeurChangee.emit(self._model.valeur)  # notif View

# FastAPI (Python) = Model + API
# Vue.js / React    = ViewModel + View

# api/main.py — FastAPI expose les données
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class Article(BaseModel):
    id: int
    titre: str
    contenu: str

articles_db = [
    Article(id=1, titre="Premier", contenu="...")
]

@app.get("/articles")
async def lister():
    return articles_db         # ← Model → JSON

------------------------------------------
# Vue.js consomme l'API (ViewModel côté front)
# const articles = ref([])
# onMounted(() => fetch('/articles')
#   .then(r => r.json())
#   .then(d => articles.value = d))

// stores/articlesStore.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useArticlesStore = defineStore('articles', () => {
  // State (équivaut à ref() dans un composant)
  const articles   = ref([]);
  const chargement = ref(false);

  // Getters (computed)
  const publies = computed(() => articles.value.filter(a => a.publie));

  // Actions
  async function charger() {
    chargement.value = true;
    articles.value = await fetch('/api/articles').then(r => r.json());
    chargement.value = false;
  }

  return { articles, chargement, publies, charger };
});

// Dans n'importe quel composant :
const store = useArticlesStore();
store.charger();  // tous les composants voient la même donnée

import { create } from 'zustand';

const useAuthStore = create(set => ({
  user:      null,
  connecte:  false,

  connecter: (userData) => set({
    user: userData, connecte: true
  }),
  deconnecter: () => set({ user: null, connecte: false }),
}));

// Dans n'importe quel composant :
const { user, connecte, deconnecter } = useAuthStore();