Adloun

Vue : construire une application web (école d'ingénieur) · Chapitre 3 · Application directe du cours

Avant et après nextTick

La réactivité · niveau 2

Énoncé

Qu'affiche la console après un clic sur « +1 », et dans quel ordre ?


<div id="app">
  <p id="n">{{ n }}</p>
  <button type="button" @click="incrementer">+1</button>
</div>

const { createApp, ref, nextTick } = Vue;

createApp({
  setup() {
    const n = ref(0);
    const lire = () => document.querySelector("#n").textContent;
    async function incrementer() {
      n.value++;
      console.log("A", n.value, lire());
      setTimeout(() => console.log("C", n.value, lire()), 0);
      await nextTick();
      console.log("B", n.value, lire());
    }
    return { n, incrementer };
  },
}).mount("#app");

Corrigé


A 1 0
B 1 1
C 1 1

A : la donnée vaut déjà 1, mais la page n'est pas encore rendue et affiche 0. B : après await nextTick(), le rendu a eu lieu. C : le rappel de setTimeout est une tâche, exécutée après toutes les microtâches, rendu et suite de la fonction compris ; il s'affiche en dernier.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →