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
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.