Test technique VueJS | QCM & Quiz – Partie 26

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. Quel est l’intérêt des « scoped slots » ?

A Ils permettent de partager logique entre composants.

B Ils définissent des prop-types dans le composant enfant.

C Ils permettent de lier des éléments entre plusieurs composants.

D Ils permettent de personnaliser le contenu d’un composant dans son parent tout en gardant le contexte.

Les « scoped slots » dans Vue.js permettent de passer du contenu personnalisé (comme des éléments DOM ou d’autres composants) dans un composant enfant tout en préservant l’accès au contexte du composant parent. Cela permet au parent de contrôler l’affichage tout en accédant aux données ou aux méthodes du composant enfant, créant ainsi une plus grande flexibilité dans la personnalisation.

2. Quand utiliseriez-vous un composant async dans Vue.js ?

A Pour charger un composant au démarrage de l’application.

B Pour charger un composant uniquement lorsqu’il est requis, optimisant ainsi la performance.

C Pour créer une animation lors du rendu des composants.

D Pour gérer l’état centralisé de l’application.

Un composant asynchrone dans Vue.js permet de charger un composant uniquement lorsqu’il est nécessaire, ce qui aide à optimiser la performance en réduisant la taille initiale du bundle JavaScript. Cela est particulièrement utile pour le lazy loading (chargement paresseux), où vous ne chargez un composant que lorsque l’utilisateur en a besoin, comme lors de la navigation vers une vue ou un élément spécifique.

3. Comment éviter un comportement de mise à jour excessif des composants dans Vue ?

A En utilisant v-show au lieu de v-if.

B En appliquant des watchers pour surveiller les changements dans les données.

C En utilisant des clés uniques dans v-for.

D En utilisant computed pour éviter de recalculer des valeurs non modifiées.

Les propriétés calculées (computed) dans Vue.js sont conçues pour optimiser les performances en permettant à Vue de mémoriser (cacher) les résultats des calculs tant que les dépendances (données utilisées dans la propriété calculée) n’ont pas changé. Cela signifie que si les données sous-jacentes ne changent pas, la propriété calculée ne sera pas réévaluée, ce qui permet d’éviter des calculs inutiles et des mises à jour excessives des composants.

4. Quel mécanisme Vue utilise-t-il pour gérer les changements de données ?

A L’écoute des modifications de DOM directement.

B Le virtual DOM et des watchers.

C Des triggers personnalisés dans chaque composant.

D L’usage de directives CSS.

Vue utilise deux mécanismes principaux pour gérer les changements de données et les mettre à jour dans l’interface utilisateur:

Le Virtual DOM: Vue crée une version virtuelle du DOM, qui est une représentation en mémoire de l’interface utilisateur. Lorsqu’une donnée change, Vue compare cette version virtuelle du DOM avec l’ancienne version (un processus appelé diffing) pour déterminer ce qui a changé. Ensuite, il met à jour uniquement les parties du DOM réel qui ont été modifiées, ce qui optimise les performances.
Les Watchers: Vue utilise des watchers pour surveiller les données réactives et détecter les changements. Lorsqu’une donnée réactive change, Vue active le watcher associé à cette donnée, ce qui permet de réagir aux changements et de mettre à jour l’interface utilisateur en conséquence.

5. Comment gérez-vous l’accès aux propriétés privées d’un composant Vue ?

A En utilisant this.$private.

B Par props.

C En les encapsulant dans un composant enfant et en utilisant des méthodes privées.

D En définissant des méthodes getter dans le composant.

Dans Vue.js, les propriétés privées d’un composant (c’est-à-dire celles qui ne sont pas destinées à être accessibles depuis l’extérieur du composant) sont généralement manipulées en interne par le composant. Pour y accéder de manière contrôlée et sécurisée, on peut utiliser des méthodes getter ou des computed properties. Cela permet d’exposer certains aspects des données de manière encapsulée, sans les rendre directement accessibles à l’extérieur du composant.

6. Qu’est-ce que le Virtual DOM en Vue.js ?

A Une bibliothèque pour créer des composants.

B Un mécanisme d’optimisation du rendu des composants en comparant l’état actuel et précédent du DOM.

C Un outil pour créer des transitions dynamiques.

D Un composant pour manipuler le DOM via des événements.

Le Virtual DOM est un concept clé dans Vue.js (et d’autres bibliothèques comme React). Il s’agit d’une représentation en mémoire du DOM réel. Lorsqu’un changement de données se produit, Vue met à jour le Virtual DOM au lieu de modifier directement le DOM réel. Ensuite, Vue compare la version actuelle du Virtual DOM avec l’ancienne version pour calculer les différences (un processus appelé diffing). Cela permet de mettre à jour seulement les parties modifiées du DOM réel, ce qui améliore les performances et réduit les coûts de manipulation du DOM.

7. Pourquoi est-il préférable d’utiliser `v-if` plutôt que `v-show` pour des éléments rarement visibles ?

A v-if désactive complètement l’élément du DOM.

B v-show rend l’élément invisible mais garde l’élément dans le DOM.

C v-if est plus rapide pour afficher un élément visible immédiatement.

D v-show rend l’élément plus performant.

Lorsque vous utilisez v-if, l’élément est ajouté ou supprimé du DOM en fonction de la condition. Cela signifie que si l’élément est rarement visible, Vue ne le garde pas dans le DOM lorsque la condition est fausse, ce qui peut améliorer les performances, car il n’occupe pas de place dans le DOM lorsque l’élément n’est pas nécessaire.

8. Dans Vue.js, que permet de faire la directive `v-slot` ?

A Injecter des données dynamiques dans un composant.

B Émettre des événements personnalisés dans un composant enfant.

C Passer un slot personnalisé avec un contenu spécifique dans un composant.

D Créer une liaison bidirectionnelle de données entre composants.

La directive v-slot permet de passer un contenu personnalisé dans un composant via des slots. Elle permet de définir des slots nommés et d’y insérer du contenu venant du parent tout en ayant la possibilité d’utiliser des données dynamiques ou un contexte spécifique du composant enfant. Cela permet de créer des composants plus flexibles et réutilisables.

9. Quelle est la méthode standard pour afficher un composant enfant dans Vue.js ?

A Par v-slot uniquement.

B Par l’utilisation de this.$refs.

C Par <component> dans le template parent.

D En incluant directement un autre fichier .vue dans le template.

<component> est utilisé pour rendre un composant de manière dynamique en fonction d’une condition.

10. Comment créer un composant global dans Vue.js ?

A En utilisant Vue.component() dans le fichier main.js.

B En utilisant un v-for sur un composant.

C En faisant une instanciation de composant à chaque fois qu’il est appelé.

D En injectant les composants avec Vue.inject().

Pour créer un composant global dans Vue.js, vous devez enregistrer le composant via Vue.component() dans le fichier principal de l’application (souvent main.js ou main.ts). Cela permet d’utiliser ce composant partout dans votre application sans avoir besoin de l’importer spécifiquement dans chaque fichier où vous souhaitez l’utiliser.

QCMs qui pourraient vous intéresser :

1. Quel est l’intérêt des « scoped slots » ?

2. Quand utiliseriez-vous un composant async dans Vue.js ?

3. Comment éviter un comportement de mise à jour excessif des composants dans Vue ?

4. Quel mécanisme Vue utilise-t-il pour gérer les changements de données ?

5. Comment gérez-vous l’accès aux propriétés privées d’un composant Vue ?

6. Qu’est-ce que le Virtual DOM en Vue.js ?

7. Pourquoi est-il préférable d’utiliser v-if plutôt que v-show pour des éléments rarement visibles ?

8. Dans Vue.js, que permet de faire la directive v-slot ?

9. Quelle est la méthode standard pour afficher un composant enfant dans Vue.js ?

10. Comment créer un composant global dans Vue.js ?

Vous pourrez aussi aimer

Test technique VueJS | QCM & Quiz – Partie 22

Test technique VueJS | QCM & Quiz – Partie 28

Test technique VueJS | QCM & Quiz – Partie 7

Laisser un commentaire Annuler la réponse

7. Pourquoi est-il préférable d’utiliser `v-if` plutôt que `v-show` pour des éléments rarement visibles ?

8. Dans Vue.js, que permet de faire la directive `v-slot` ?