Adloun

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

Une valeur par défaut partagée

Vite et composants monofichiers · niveau 2

Énoncé

Le composant suivant (dossier erreurs du chapitre) est utilisé deux fois, sans prop : <ListeRayons /> <ListeRayons />. Le premier bloc <script>, sans setup, n'est exécuté qu'une fois, au chargement du module ; le second, à chaque instance. Qu'affiche la console ? Vue affiche-t-il un avertissement ? Et ESLint ? Corriger.


<script>
// Ce bloc-ci est exécuté une seule fois, au chargement du module :
// on y garde les tableaux reçus par chaque instance.
const vus = [];
</script>

<script setup>
const props = defineProps({
  rayons: { type: Array, default: ["Informatique"] },
});

vus.push(props.rayons);
console.log(`instance ${vus.length}, même tableau que la première :`, vus[0] === props.rayons);
</script>

Corrigé

La console affiche :


instance 1, même tableau que la première : true
instance 2, même tableau que la première : true

Les deux instances reçoivent le même tableau : il a été créé une fois, quand le module a été évalué, et sert de valeur par défaut à toutes les instances. Si l'une le modifiait, l'autre verrait la modification. Vue 3.5 n'affiche aucun avertissement ; ESLint, lui, signale l'erreur :


  9:35  error  Type of the default value for 'rayons' prop must be a function  vue/require-valid-default-prop

La correction fournit une fonction qui fabrique le tableau, appelée pour chaque instance :


<script setup>
const props = defineProps({
  rayons: { type: Array, default: () => ["Informatique"] },
});

vus.push(props.rayons);
console.log(`instance ${vus.length}, même tableau que la première :`, vus[0] === props.rayons);
</script>

instance 1, même tableau que la première : true
instance 2, même tableau que la première : false

C'est la même raison qu'en Java pour ne pas initialiser un champ static avec une liste que chaque objet croirait à lui.

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 →