Vue Fundamentals

Preview — 3 of 10 questions

Pourquoi ce code n'affiche-t-il pas la valeur mise à jour dans le template ?

javascript

<script setup>
let count = 0

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

ALa fonction increment est mal déclarée — il faut utiliser methods:

BLe template doit utiliser {{ count.value }} pour afficher la valeur

Ccount++ ne fonctionne pas, il faut écrire count = count + 1

Dcount est une variable JavaScript ordinaire — Vue ne peut pas détecter ses changements. Il faut utiliser ref(0) pour que la réactivité fonctionne

Quelle est la différence entre v-if et v-show ?

javascript

<template>
  <div v-if="isVisible">v-if content</div>
  <div v-show="isVisible">v-show content</div>
</template>

Av-if et v-show sont identiques — ce sont des alias

Bv-if supprime/recrée l'élément du DOM selon la condition ; v-show garde l'élément dans le DOM mais change display: none

Cv-show supprime l'élément du DOM ; v-if utilise opacity: 0

Dv-if fonctionne uniquement avec des booléens ; v-show accepte n'importe quelle valeur truthy

Pourquoi Vue recommande-t-il toujours d'ajouter :key dans un v-for ?

javascript

<template>
  <!-- Sans key -->
  <li v-for="item in items">{{ item.name }}</li>

  <!-- Avec key -->
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</template>

A:key est obligatoire syntaxiquement — Vue refuse de compiler sans

B:key sert uniquement à l'accessibilité (ARIA)

C:key permet à Vue de suivre l'identité de chaque élément pour optimiser le patch du DOM virtuel — sans key, Vue réutilise les éléments par position ce qui cause des bugs lors de réordonnancement

D:key améliore le style CSS des éléments listés

Answer all 10 questions (7 more), see explanations for every answer, and track your score.