Test technique VueJS | QCM & Quiz – Partie 21

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. Comment pouvez-vous passer des données d’un composant parent à un composant enfant dans Vue.js ?

A En utilisant des props.

B En utilisant des événements personnalisés.

C En utilisant des méthodes globales.

D En utilisant v-for pour itérer sur les données.

Les données sont passées d’un composant parent à un composant enfant à travers les props. Les props permettent de transmettre des valeurs de manière réactive, et l’enfant peut les utiliser dans son modèle ou ses méthodes.

2. Quelle est la méthode correcte pour accéder à l’état global dans Vuex depuis un composant Vue.js ?

A this.$state

B this.$store.state

C this.$root.state

D this.$store.getState()

L’état global dans Vuex peut être accédé via this.$store.state. Cela vous permet de récupérer les données stockées dans Vuex et de les utiliser dans votre composant Vue.js.

3. Quelle est la méthode de Vue.js pour démarrer une animation lorsqu’un élément entre ou quitte le DOM ?

A v-bind:transition

B v-transition

C v-bind:animate

D v-if avec une transition

Vue.js permet d’ajouter des animations à des éléments lorsque ceux-ci entrent ou sortent du DOM en utilisant la directive v-if ou v-show avec un wrapper de transition. Vous pouvez définir des classes de transition pour animer ces éléments au moment de leur ajout ou retrait du DOM.

4. Qu’est-ce que la fonction `render()` dans Vue.js ?

A Elle permet de rendre le DOM d’un composant en fonction de ses données.

B Elle génère un élément du DOM en fonction des événements.

C Elle rend les données d’un composant sous forme d’une chaîne de caractères.

D Elle permet de manipuler le cycle de vie des composants.

La fonction render() est une méthode qui peut être utilisée pour personnaliser le rendu du DOM d’un composant. Elle prend en entrée une fonction qui renvoie un arbre d’éléments virtuels représentant le DOM, ce qui permet une grande flexibilité dans la création de l’interface utilisateur.

5. Comment pouvez-vous créer un mixin global dans Vue.js ?

A En utilisant Vue.mixin().

B En utilisant Vue.createMixin().

C En créant un fichier mixin.js et en l’important dans chaque composant.

D En utilisant this.$mixin() dans les composants.

Vue.mixin() permet de créer un mixin global qui sera appliqué à tous les composants de l’application. Cela permet de partager des méthodes, des données ou des hooks du cycle de vie entre plusieurs composants sans les dupliquer.

6. Quelle méthode permet de recharger une vue dans Vue Router ?

A this.$router.refresh()

B this.$router.replace()

C this.$router.push()

D this.$router.go(0)

La méthode this.$router.go(0) recharge la page actuelle dans Vue Router. Cela fonctionne de la même manière qu’un rechargement de page via le navigateur. Vous pouvez également utiliser this.$router.push() pour naviguer vers une autre route, mais go(0) est utilisé spécifiquement pour recharger la page.

7. Quelle directive permet de lier un événement de la souris à un élément dans Vue.js ?

A v-on:mouseenter

B v-mouse

C v-bind:mouseenter

D v-on:click

La directive v-on permet de lier des événements, comme les événements de souris (mouseenter, click, etc.), à des méthodes dans Vue.js. Cela vous permet de réagir aux actions de l’utilisateur sur un élément.

8. Que se passe-t-il si vous modifiez un objet réactif dans Vue.js en ajoutant une nouvelle propriété ?

A Vue.js détecte automatiquement cette nouvelle propriété et la rend réactive.

B Vue.js ne peut pas détecter les ajouts de nouvelles propriétés et elles ne sont pas réactives.

C Vue.js détecte la nouvelle propriété, mais elle n’est pas affichée dans le DOM.

D Vue.js rend la propriété visible mais ne met pas à jour l’interface utilisateur.

Vue.js utilise un système de réactivité basé sur la gestion des objets et de leurs propriétés lors de leur création. Si vous ajoutez de nouvelles propriétés à un objet après qu’il ait été observé par Vue, ces propriétés ne seront pas réactives. Pour les rendre réactives, vous devez utiliser this.$set() ou Vue.set().

9. Quel hook de cycle de vie Vue.js est utilisé pour détruire un composant ?

A beforeDestroy()

B destroyed()

C destroying()

D beforeUnmount()

beforeDestroy() est appelé juste avant la destruction d’un composant. Vous pouvez l’utiliser pour effectuer des nettoyages, comme la suppression des écouteurs d’événements ou l’annulation des requêtes API en cours.

10. Comment passer des données dynamiques dans un composant Vue.js ?

A En utilisant des props pour lier des valeurs du parent à l’enfant.

B En utilisant des événements personnalisés pour envoyer des données à un parent.

C En utilisant une variable d’état dans le composant lui-même.

D Toutes les réponses ci-dessus.

Les données dynamiques peuvent être passées de différentes manières dans Vue.js : par l’utilisation des props (du parent à l’enfant), des événements personnalisés (de l’enfant au parent), ou via l’état local du composant. Chaque méthode répond à un besoin différent selon la direction des données.

QCMs qui pourraient vous intéresser :

1. Comment pouvez-vous passer des données d’un composant parent à un composant enfant dans Vue.js ?

2. Quelle est la méthode correcte pour accéder à l’état global dans Vuex depuis un composant Vue.js ?

3. Quelle est la méthode de Vue.js pour démarrer une animation lorsqu’un élément entre ou quitte le DOM ?

4. Qu’est-ce que la fonction render() dans Vue.js ?

5. Comment pouvez-vous créer un mixin global dans Vue.js ?

6. Quelle méthode permet de recharger une vue dans Vue Router ?

7. Quelle directive permet de lier un événement de la souris à un élément dans Vue.js ?

8. Que se passe-t-il si vous modifiez un objet réactif dans Vue.js en ajoutant une nouvelle propriété ?

9. Quel hook de cycle de vie Vue.js est utilisé pour détruire un composant ?

10. Comment passer des données dynamiques dans un composant Vue.js ?

Vous pourrez aussi aimer

Test technique VueJS | QCM & Quiz – Partie 26

Test technique VueJS | QCM & Quiz – Partie 15

Test technique VueJS | QCM & Quiz – Partie 33

Laisser un commentaire Annuler la réponse

4. Qu’est-ce que la fonction `render()` dans Vue.js ?