Fin des soldes

<div id="app">
  <p>{{ reste > 0 ? "Fin des soldes dans " + reste + " s" : "Les soldes sont terminés." }}</p>
</div>

const { createApp, ref } = Vue;

createApp({
  setup() {
    const reste = ref(3);
    const minuteur = setInterval(() => {
      reste.value--;
      if (reste.value === 0) {
        clearInterval(minuteur);
      }
    }, 1000);
    return { reste };
  },
}).mount("#app");

Le paragraphe juste après le chargement, une seconde plus tard, puis trois secondes plus tard :

Fin des soldes dans 3 s
Fin des soldes dans 2 s
Les soldes sont terminés.

Le minuteur ne touche qu'à la ref reste ; le gabarit décrit le texte pour toute valeur de reste, et Vue rend la page après chaque modification. On arrête le minuteur avec clearInterval pour ne pas descendre sous zéro. Si l'application pouvait disparaître de la page, il faudrait aussi l'arrêter à ce moment : c'est le rôle du cycle de vie (chapitre 8).