Le modèle MVVM dans Vue.js

L'architecture MVVM (Model-View-ViewModel) est au cœur de Vue. Elle permet de dissocier la logique métier de l'interface utilisateur :

• Model : Représente les données brutes (objets JavaScript).
• View : L'interface utilisateur gérée par le DOM.
• ViewModel : L'instance de Vue qui fait le pont entre le Model et la View.

Grâce au système de réactivité, toute modification du Model est répercutée sur la View via le Data Binding. Inversement, les DOM Listeners capturent les interactions utilisateur pour mettre à jour le Model.

Comprendre le DOM Virtuel

Le DOM Virtuel est une représnetation légère en JavaScript de l'arbre DOM réel. Lorsqu'un état change, Vue calcule les différences entre l'ancien et le nouveau DOM virtuel (processus de "diffing") et n'applique au navigateur que les modifications strictement nécessaires, ce qui optimise considérablement les performances.

Cycle de vie d'un composant

Les hooks de cycle de vie permettent d'exécuter du code à des moments précis de l'existence d'un composant :

• beforeCreate / created : Initialisation de l'instance. Dans created, les données sont réactives mais le DOM n'est pas encore accessible.
• beforeMount / mounted : Phase de montage. mounted est le moment idéal pour effectuer des appels API ou manipuler le DOM.
• beforeUpdate / updated : Déclenchés lors de la modification des données réactives.
• beforeUnmount / unmounted : Nettoyage de l'instance (arrêt des timers, suppression des écouteurs d'événements).

Utilisation de keep-alive

Le composant <keep-alive> est un copmosant intégré qui permet de mettre en cache des instances de composants dynamiques. Cela évite de recréer le composant à chaque bascule de route, préservant ainsi son état et améliorant la fluidité. Il introduit deux hooks spécifiques : activated et deactivated.

Propriétés calculées (Computed) vs Méthodes

• Computed : Les propriétés calculées sont mises en cache en fonction de leurs dépendances réactives. Elles ne sont réévaluées que si l'une de leurs sources change.
• Methods : Une méthode est exécutée à chaque fois qu'un nouveau rendu est demandé, sans système de cache.

Distinction entre v-if et v-show

• v-if : Conditionne le rendu réel. Si la condition est fausse, le composant est détruit et retiré du DOM.
• v-show : Le composant reste toujours dans le DOM ; seul son style CSS display est modifié pour le masquer.

Rôle de la propriété "key"

L'attribut key sert d'identifiant unique pour les nœuds du DOM virtuel. Lors de l'exécution de l'algorithme de comparaison (Diff), Vue utilise la clé pour identifier précisément quel élément a changé, a été ajouté ou supprimé, garantissant ainsi une mise à jour efficace et correcte des listes.

Pourquoi data doit être une fonction ?

Dans un composant, data doit obligatoirement être une fonction retournant un objet. Cela garantit que chaque instance du composant possède son propre état isolé. Si data était un simple objet, toutes les instances partageraient la même référence, entraînant des collisions de données.

Communication entre composants

• Père vers fils : Utilisation des props.
• Fils vers père : Émission d'événements via $emit.
• Global : Utilisation d'un store comme Vuex ou Pinia pour les états complexes.

Réactivité des objets et des tableaux

Vue 2 présente des limitations sur la détection des changements (corrigées dans Vue 3 avec Proxy) :

// Problèmes avec Vue 2
this.liste[0] = 'nouvelle valeur'; // Non détecté
this.liste.length = 0; // Non détecté

// Solutions
Vue.set(this.liste, index, 'valeur');
this.liste.splice(index, 1, 'valeur');

Avantages et inconvénients des SPA

Avantages : Navigation fluide sans rechargement, expérience utilisateur proche d'une application native, architecture modulaire.

Inconvénients : SEO plus complexe (nécessite souvent du SSR), temps de chargement initial potentiellement long (Bundle size).

Gestion d'état avec Vuex

Vuex centralise l'état de l'application. Voici une structure type :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    score: 0
  },
  mutations: {
    INCREMENTER(state, valeur) {
      state.score += valeur;
    }
  },
  actions: {
    ajouterPoint({ commit }, points) {
      commit('INCREMENTER', points);
    }
  },
  getters: {
    scoreDouble: state => state.score * 2
  }
});

Configuration élémentaire de Vue Router

Exemple de mise en place d'un routage de base :

import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import Profile from './components/Profile.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/utilisateur/:id', component: Profile, name: 'user' }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

// Accès aux paramètres dans le composant Profile
// console.log(this.$route.params.id);