Voici une cheatsheet d'entretien technique Vue en français :
Questions théoriques fréquentes
Q : Qu'est-ce que la dérivation (v-if/v-else) en Vue ?
La dérivation permet de conditionnellement afficher ou cacher des éléments dans le DOM. La directive v-if est utilisée pour afficher un élément si une condition est vraie, tandis que v-else est utilisé pour afficher un autre élément si la condition est fausse.
Q : Qu'est-ce que les props en Vue ? Les props sont une forme de communication parent-enfant dans Vue. Ils permettent aux composants enfants de recevoir des données depuis leur composant parent.
Q : Quelle est l'importance de la reactivité en Vue ? La reactivité en Vue permet d'automatiser la mise à jour du DOM lorsque les données changent. Cela augmente la productivité et la performance de l'application.
Q : Qu'est-ce que la différenciation virtuelle (Virtual DOM) en Vue ? La différenciation virtuelle est une optimisation qui permet à Vue de minimiser le nombre d'opérations sur le DOM. En créant un modèle virtuel, Vue identifie les différences entre l'état actuel et l'état souhaité du DOM et ne met à jour que les éléments nécessaires.
Q : Qu'est-ce que la composition API en Vue ? La composition API est une nouvelle façon de structurer le code dans Vue 3. Elle permet de regrouper des fonctionnalités liées ensemble plutôt que d'organiser le code par composant.
Exercices de code classiques
Exercice 1 : Composant Counter
Enoncé : Créez un composant Vue qui affiche un compteur et deux boutons pour incrémenter et décrémenter la valeur du compteur.
Solutions :
<template>
<div>
<button @click="decrement">-</button>
count
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>
Exercice 2 : Component Todo List
Enoncé : Créez un composant Vue qui permet d'ajouter des tâches et de les afficher. Chaque tâche doit avoir une case à cocher pour marquer la tâche comme effectuée.
Solutions :
<template>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Ajouter une tâche" />
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.done" /> todo.text
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({ text: this.newTodo, done: false });
this.newTodo = '';
}
}
}
};
</script>
Exercice 3 : Composant Toggle Button
Enoncé : Créez un composant Vue qui affiche un bouton avec le texte "ON" ou "OFF". Lorsqu'on clique sur le bouton, son état bascule entre "ON" et "OFF".
Solutions :
<template>
<button @click="toggle">isOn ? 'OFF' : 'ON'</button>
</template>
<script>
export default {
data() {
return {
isOn: false
};
},
methods: {
toggle() {
this.isOn = !this.isOn;
}
}
};
</script>
Exercice 4 : Component Dropdown Menu
Enoncé : Créez un composant Vue qui affiche une liste déroulante avec plusieurs options. Lorsqu'on sélectionne une option, elle est affichée dans le champ de recherche.
Solutions :
<template>
<div>
<input v-model="search" placeholder="Rechercher" />
<select @change="setSelected">
<option disabled value="">Choisissez une option</option>
<option v-for="(item, index) in items" :key="index" :value="item">item</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
items: ['Option 1', 'Option 2', 'Option 3']
};
},
methods: {
setSelected(event) {
this.search = event.target.value;
}
}
};
</script>
Exercice 5 : Component Accordion
Enoncé : Créez un composant Vue qui affiche une liste d'éléments. Chaque élément peut être ouvert et fermé en cliquant dessus.
Solutions :
<template>
<div v-for="(item, index) in items" :key="index">
<button @click="toggle(index)">item.title</button>
<div v-if="item.open" class="content">
item.content
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ title: 'Item 1', content: 'Contenu de l\'item 1', open: false },
{ title: 'Item 2', content: 'Contenu de l\'item 2', open: false }
]
};
},
methods: {
toggle(index) {
this.items[index].open = !this.items[index].open;
}
}
};
</script>
<style>
.content {
margin-left: 20px;
}
</style>
Pièges courants en entretien
Piege 1 : Utilisation incorrecte des props
Explication : Les props doivent être utilisés pour passer des données du parent au enfant. Utiliser les props comme des variables de state est une erreur courante et peut entraîner un comportement inattendu.
Piege 2 : Manque de gestion des événements
Explication : Ignorer la gestion des événements dans les composants peut entraîner une application non réactive. Assurez-vous d'utiliser @click, v-model et autres directives pour gérer les interactions utilisateur.
Piege 3 : Utilisation de v-if à l'intérieur de v-for
Explication : L'utilisation de v-if à l'intérieur de v-for peut entraîner des performances dégradées, car Vue doit réévaluer tous les éléments. Utilisez plutôt une directive v-show pour afficher ou cacher des éléments.
Piege 4 : Manque de gestion des erreurs
Explication : Ignorer la gestion des erreurs dans les composants peut entraîner des bugs difficiles à débuguer. Assurez-vous d'utiliser try/catch et console.error() pour gérer les erreurs.
Piege 5 : Utilisation incorrecte de l'API Composition
Explication : La composition API est un nouveau système de structuration du code, mais elle peut être difficile à comprendre au début. Assurez-vous de lire la documentation officielle et d'exerciser régulièrement pour maîtriser cette API.
Complexité algorithmique
Opération | Complexité
- Lire une propriété : O(1)
- Définir une propriété : O(1)
- Ajouter un élément à l'array : O(n)
- Supprimer un élément de l'array : O(n)
- Parcourir un array : O(n)
Concepts avancés à connaître
Q : Qu'est-ce que les composants réactifs en Vue ? Les composants réactifs sont des entités qui contiennent du code pour mettre à jour le DOM lorsqu'un événement ou une donnée change. Ils permettent de créer des applications réactives et interactives.
Q : Qu'est-ce que les watchers en Vue ? Les watchers sont des fonctions qui s'exécutent lorsque une donnée spécifiée change. Ils sont utiles pour effectuer des tâches asynchrones ou des actions basées sur la modification de données.
Q : Qu'est-ce que les mixins en Vue ? Les mixins sont des objets contenant des propriétés et des méthodes qui peuvent être combinées avec d'autres composants. Ils permettent une réutilisation du code et une meilleure organisation du code.
Q : Qu'est-ce que la navigation guard en Vue Router ? La navigation guard est une fonction qui s'exécute avant le changement de route. Elle peut être utilisée pour vérifier des conditions, comme la connexion d'un utilisateur ou l'autorisation d'accès à certaines routes.
Q : Qu'est-ce que les transitions et animations en Vue ? Les transitions et animations permettent de créer des effets visuels en changeant le style des éléments du DOM lorsqu'ils sont ajoutés, supprimés ou modifiés. Ils peuvent être utilisées pour améliorer l'expérience utilisateur.
Conseils pratiques
Conseil 1 : Pratiquer régulièrement
Pour maîtriser Vue et réussir les entretiens technique, il est important de pratiquer régulièrement en résolvant des exercices de code et en travaillant sur des projets personnels.
Conseil 2 : Comprendre la documentation officielle
La documentation officielle de Vue est une ressource précieuse pour comprendre les concepts avancés et les bonnes pratiques. La lire régulièrement peut grandement améliorer votre connaissance du framework.
Conseil 3 : Apprendre le composition API
La composition API est un nouveau système de structuration du code en Vue 3. Elle permet une meilleure organisation du code et des performances plus réponses. Il est recommandé d'apprendre cette API pour maîtriser les dernières tendances du framework.
Conseil 4 : Pratiquer l'optimisation
Optimiser votre application Vue est essentiel pour assurer sa performance et son bon fonctionnement. Pratiquez régulièrement l'optimisation en utilisant des techniques telles que la différenciation virtuelle, les props réactifs et les watchers.
Conseil 5 : Comprendre les erreurs
Comprendre comment les erreurs fonctionnent dans Vue est crucial pour déboguer rapidement et efficacement. Pratiquez régulièrement la gestion des erreurs en utilisant try/catch et console.error().