Présentation générale

  • Framework JavaScript pour construire des interfaces utilisateurs
  • Créé par Evan You en 2014
  • Excellente documentation et communauté active

  • Mise à jour automatique de l'interface quand les données changent
  • Pas besoin de manipuler le DOM manuellement

  • Proche du HTML/CSS/JS classique
  • Templates intuitifs avec syntaxe familière
  • Courbe d'apprentissage douce

  • Fichiers .vue contenant HTML, CSS et JavaScript
  • Composants réutilisables et maintenables
  • Isolation du style et de la logique

Outils et Écosystème

Développement :

  • Vue Router : gestion de la navigation
  • Pinia : gestion d'état (remplace Vuex)

Débug

  • Vue DevTools : debugging

2 syntaxes différentes

Options API (utilisé sur Studea)

✓ Avantages :
  • Structure claire et organisée par options (data, methods, computed...)
  • Idéale pour les débutants
  • Convention établie et bien documentée
  • Moins de concepts à apprendre
✗ Inconvénients :
  • Code dispersé pour une même fonctionnalité
  • Difficile à réutiliser entre composants
  • TypeScript moins optimal

Composition API

✓ Avantages :
  • Logique regroupée par fonctionnalité
  • Meilleure réutilisabilité (composables)
  • Excellent support TypeScript
  • Plus flexible pour les gros projets
  • Code plus maintenable
✗ Inconvénients :
  • Courbe d'apprentissage plus raide
  • Plus de concepts (ref, reactive, toRefs...)
  • Moins intuitif pour les débutants

Les composants

Il sont composés de trois blocs :

  • <template> : HTML du composant
  • <script> : Logique JavaScript
  • <style> : CSS du composant

Data

  • Données réactives du composant
  • Retourne un objet avec les propriétés
  • Accessible via this dans le composant

Methods

  • Fonctions appelables depuis le template
  • Gèrent les interactions utilisateur
  • Peuvent modifier le state

Computed

  • Valeurs dérivées calculées automatiquement
  • Mises en cache : recalculées uniquement si leurs dépendances changent
  • Plus performant que les methods pour les calculs

Cycle de vie des composants

Props

Pour passer des données d'un composant parent à un composant enfant, il faut utiliser les props. 
Elles se définissent comme ceci: 

Pour le passage de données d'un composant parent à un composant enfant profondément imbriqué, il est possible d'uiliser le provide/inject afin de ne pas à avoir à passer les props dans chacun des enfants (Attention cette méthode de transmission des props est a utilisé avec partimonie)

Comment remonter des données de l'enfant vers le parent ?

On ne peut pas directement renvoyer une donnée de l'enfant vers le parent. Pour ce faire il faut émettre un événement depuis l'enfant et capter cet événement dans le parent. On peut ajouter un payload à l'événement pour remonter des données

Directives

Vuejs met à notre disposition plusieurs directives natives, telle que v-if, v-show, v-for, v-model. 

  • v-if : afficher ou masque un élément du DOM, l'élément caché n'est pas rendu
  • v-show : idem que v-if sauf que l'élément caché est en display: none
  • v-for : Utiliser pour boucler sur un array. Attention à toujours ajouter l'attribut key sur l'élément qui a le v-for
  • v-model : Utiliser pour coupler une variable à un input. Ainsi si l'utilisateur tape dans l'input, la data changera

Il est également possible de créer ces propres directives custom

Pinia

Pinia est un outil de gestion de données. Étant donné que les données sont créées au montage du composant il est parfois difficile de partager la même donnée sur plusieurs pages. Pinia offre donc la possibilité de stocker des données qui seront accessible dans toute l'application

  • Store centralisé pour l'état global de l'application
  • Remplace Vuex (plus simple et moderne)
  • State : données partagées entre composants
  • Getters : propriétés dérivées du state (optionnel)
  • Actions : méthodes pour modifier le state

Recommandations

✓ Éviter la logique dans les vues
Passer par un service pour la logique métier

✓ Éviter les appels AJAX dans les composants
Remonter un event et faire l'appel dans la vue parent

✓ Injection de dépendances
Ne pas appeler directement les dépendances dans les services, les passer en paramètre → facilite les tests

✓ Object.freeze()
Pour les constantes au lieu de les passer dans les classes de services
Évite la réactivité inutile sur les données immuables


Lien vers la docs Vuejs, Pinia