Impératif contre déclaratif — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 1)

Impératif contre déclaratif

Premiers pas avec Vue · niveau 2

Énoncé

Récrire avec Vue la page suivante (un paragraphe <p id="etat"> et un bouton <button id="reserver">). Compter les lignes des deux versions, et dire ce qu'il faudrait modifier dans chacune pour afficher aussi le stock dans le titre de la page.


// L'énoncé : la version écrite à la main.
let stock = 2;
const etat = document.querySelector("#etat");
const reserver = document.querySelector("#reserver");

function afficher() {
  etat.textContent = stock === 0 ? "Épuisé" : `${stock} en stock`;
  reserver.disabled = stock === 0;
}

reserver.addEventListener("click", () => {
  stock -= 1;
  afficher();
});

afficher();

Corrigé


<div id="app">
  <p>{{ stock === 0 ? "Épuisé" : stock + " en stock" }}</p>
  <button type="button" :disabled="stock === 0" @click="stock--">Réserver</button>
</div>


const { createApp, ref } = Vue;

createApp({
  setup() {
    const stock = ref(2);
    return { stock };
  },
}).mount("#app");

Au chargement, puis après chaque clic, le paragraphe, et pour finir l'état du bouton :


2 en stock
1 en stock
Épuisé
true

Le script impératif compte 12 lignes de code, celui de la version Vue 7, dont 4 de pure structure (l'appel à createApp et la fonction setup). Surtout, pour afficher le stock dans un titre, la version Vue n'a besoin que d'une interpolation dans le gabarit, <h1>{{ stock }} en stock</h1>, alors que la version impérative demande une référence de plus vers le titre et une ligne de plus dans afficher.