Test technique VueJS | QCM & Quiz – Partie 29

mars 16, 2025mars 16, 2025 Thomas Aucun commentaire

Les QCM VueJS sont un excellent moyen de tester et d’approfondir vos connaissances sur ce puissant framework JavaScript. Que vous soyez débutant cherchant à maîtriser les bases ou développeur expérimenté souhaitant valider vos compétences techniques, nos quiz interactifs vous permettent d’évaluer votre compréhension de VueJS. Grâce à des questions ciblées sur des concepts clés comme les composants, la gestion d’état et les directives, ces tests vous aideront à progresser rapidement et à renforcer vos compétences en développement web.

1. Dans Vue.js, que permet `v-on:submit.prevent` ?

A Empêche l’événement de soumission de recharger la page.

B Crée un slot dynamique pour la soumission du formulaire.

C Applique un style dynamique lors de la soumission.

D Exécute une fonction lors du clic sur un bouton.

La directive v-on:submit.prevent dans Vue.js est utilisée pour écouter l’événement submit d’un formulaire et empêcher son comportement par défaut, qui est généralement de recharger la page. Cela permet de gérer la soumission d’un formulaire sans que la page soit rechargée, ce qui est souvent nécessaire dans les applications modernes utilisant JavaScript pour gérer les formulaires de manière asynchrone.

2. Comment éviter la duplication des événements dans Vue.js ?

A Utiliser .once avec v-on pour déclencher l’événement une seule fois.

B Utiliser des slots dynamiques pour lier les événements.

C Modifier les props avant l’événement.

D Lier un computed à l’événement.

Dans Vue.js, si vous souhaitez que l’événement soit déclenché une seule fois, vous pouvez utiliser le modificateur .once avec v-on. Ce modificateur permet de s’assurer que l’événement est écouté une seule fois et qu’il ne sera plus déclenché après sa première exécution.

3. Que se passe-t-il si vous liez une prop non définie dans Vue.js ?

A Vue.js ignore la prop et l’élément sera non réactif.

B Vue.js génère un avertissement dans la console.

C Vue.js applique une valeur par défaut à la prop.

D Vue.js lie la prop au store global.

Si vous tentez de lier une prop non définie dans un composant Vue.js, Vue générera un avertissement dans la console, vous informant que la prop est utilisée mais non définie dans le composant.

Cela se produit parce que Vue s’attend à ce que toutes les props utilisées dans un composant soient définies dans l’option props de ce composant. Si une prop est passée à un composant, mais qu’elle n’est pas définie dans la déclaration des props de ce composant, Vue émettra un avertissement dans la console.

4. Comment afficher une donnée réactive dans un template Vue.js ?

A En utilisant des double accolades {{ }} dans le template.

B En utilisant v-bind dans l’attribut HTML.

C En insérant une fonction dans le template.

D En appelant directement la donnée dans le data().

Dans Vue.js, pour afficher une donnée réactive dans un template, vous utilisez les double accolades {{ }}, également appelées interpolation. Elles permettent de lier une donnée réactive définie dans l’option data d’un composant au DOM.

5. Comment détecter une modification dans un tableau avec Vue ?

A En réassignant complètement le tableau à une nouvelle variable.

B En utilisant this.$set() pour modifier un élément du tableau.

C Les tableaux sont réactifs par défaut, aucune action n’est nécessaire.

D En utilisant un watcher sur l’élément du tableau.

Utiliser un watcher sur l’élément du tableau peut effectivement être une manière de détecter des changements dans un tableau, mais ce n’est pas nécessaire pour la plupart des cas dans Vue.js, car les tableaux sont réactifs par défaut.

6. Quel est l’effet de `this.$delete()` dans Vue.js ?

A Supprime une propriété réactive d’un objet.

B Modifie un attribut HTML dynamique dans le DOM.

C Supprime un élément du DOM via v-if.

D Émet un événement personnalisé lors de la suppression.

La méthode this.$delete() dans Vue.js permet de supprimer une propriété d’un objet tout en maintenant la réactivité du système. Si vous utilisez delete de manière classique pour supprimer une propriété d’un objet dans Vue.js, le système réactif de Vue ne détectera pas cette modification. En revanche, this.$delete() garantit que la réactivité est préservée et que l’interface utilisateur sera mise à jour correctement.

7. Comment créer une méthode accessible dans tout le projet Vue.js ?

A En définissant la méthode dans Vue.prototype.

B En créant un mixin global.

C En utilisant un store Vuex pour gérer les méthodes.

D En enregistrant la méthode dans data() de la racine.

Pour rendre une méthode accessible dans tout le projet Vue.js, vous pouvez ajouter la méthode à Vue.prototype. Cela permet à cette méthode d’être accessible dans tous les composants de l’application via this.

8. Quel est l’intérêt principal de `computed` par rapport aux `methods` ?

A computed permet de modifier une propriété d’un objet.

B computed déclenche un événement à chaque mise à jour.

C computed modifie le style CSS d’un élément.

D computed met en cache les résultats, tandis que methods les recalculent à chaque fois.

L’intérêt principal des computed properties par rapport aux methods dans Vue.js réside dans leur capacité à mettre en cache les résultats. Cela signifie qu’une computed property ne sera recalculée que lorsque les données dont elle dépend changent, contrairement à une méthode qui est exécutée à chaque fois que le composant est réévalué.

9. Que signifie l’option `scoped` dans un `<style>` Vue.js ?

A Limite les styles à ce composant uniquement.

B Applique des styles à tous les composants enfants.

C Crée un style global pour l’application.

D Permet de lier des styles conditionnels.

L’option scoped dans un bloc <style> dans un fichier Vue.js permet de limiter l’application des styles au composant courant seulement, sans affecter les autres composants de l’application. Cela signifie que les styles définis dans le bloc <style scoped> seront uniquement appliqués aux éléments du template de ce composant particulier, et non aux éléments d’autres composants.

10. Comment passer des données entre des composants non parent-enfant ?

A En utilisant un store Vuex.

B En passant des props dynamiques entre les composants.

C En créant un événement personnalisé.

D En utilisant des slots pour la communication.

Dans Vue.js, pour passer des données entre des composants non parent-enfant (composants frères, par exemple), la meilleure approche consiste à utiliser Vuex, un store centralisé pour gérer l’état de l’application. Vuex permet de partager des données de manière globale entre tous les composants, peu importe leur relation hiérarchique (parent-enfant, frère-frère, etc.).

Vuex offre un moyen centralisé et réactif pour gérer l’état de l’application, ce qui permet de maintenir la synchronisation des données entre plusieurs composants sans avoir à passer les données manuellement de l’un à l’autre via des props ou des événements.

QCMs qui pourraient vous intéresser :

1. Dans Vue.js, que permet v-on:submit.prevent ?

2. Comment éviter la duplication des événements dans Vue.js ?

3. Que se passe-t-il si vous liez une prop non définie dans Vue.js ?

4. Comment afficher une donnée réactive dans un template Vue.js ?

5. Comment détecter une modification dans un tableau avec Vue ?

6. Quel est l’effet de this.$delete() dans Vue.js ?

7. Comment créer une méthode accessible dans tout le projet Vue.js ?

8. Quel est l’intérêt principal de computed par rapport aux methods ?

9. Que signifie l’option scoped dans un <style> Vue.js ?

10. Comment passer des données entre des composants non parent-enfant ?

Vous pourrez aussi aimer

Test technique VueJS | QCM & Quiz – Partie 18

Test technique VueJS | QCM & Quiz – Partie 33

Test technique VueJS | QCM & Quiz – Partie 23

Laisser un commentaire Annuler la réponse

1. Dans Vue.js, que permet `v-on:submit.prevent` ?

6. Quel est l’effet de `this.$delete()` dans Vue.js ?

8. Quel est l’intérêt principal de `computed` par rapport aux `methods` ?

9. Que signifie l’option `scoped` dans un `<style>` Vue.js ?