Remplacer un tableau — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 3)

Remplacer un tableau

La réactivité · niveau 2

Énoncé

Qu'affichent la console et la page après un clic sur « Retirer Java » ? Expliquer la différence entre les deux lignes.


<div id="app">
  <p>ref : {{ avecRef.join(", ") }}</p>
  <p>reactive : {{ avecReactive.join(", ") }}</p>
  <button type="button" @click="retirerJava">Retirer Java</button>
</div>


const { createApp, ref, reactive } = Vue;

createApp({
  setup() {
    const avecRef = ref(["Java", "Analyse", "Physique"]);
    let avecReactive = reactive(["Java", "Analyse", "Physique"]);

    function retirerJava() {
      avecRef.value = avecRef.value.filter((t) => t !== "Java");
      avecReactive = avecReactive.filter((t) => t !== "Java");
      console.log(avecRef.value.length, avecReactive.length);
    }
    return { avecRef, avecReactive, retirerJava };
  },
}).mount("#app");

Corrigé


2 2
ref : Analyse, Physique
reactive : Java, Analyse, Physique
Retirer Java

Les deux tableaux filtrés ont deux éléments. Mais avecReactive = … réaffecte une variable locale : le gabarit utilise toujours le proxy renvoyé par setup, qui n'a pas changé. Avec une ref, on remplace sa valeur, que le gabarit lit à travers elle. Pour un objet reactive, il faudrait le modifier sur place (splice).