De nombreux développeurs, en particulier ceux en autodidacte, rencontrent un plafond de verre dans leur progression. Cette sensation de stagnation provient souvent d'une compréhension superficielle des mécanismes fondamentaux du framework. Au-delà de la simple utilisation des directives, il est crucial de maîtriser le système de réactivité pour éviter des bugs subtils en production.

Limitations de la Réactivité dans Vue.js

Une contrainte majeure de Vue 2 réside dans sa capacité à détecter les changements. Le framework ne peut pas intercepter l'ajout ou la suppression dynamique de propriétés à la racine d'un objet de données. Si vous ajoutez une nouvelle clé directement sur l'objet data après l'initialisation, les vues ne se mettront pas à jour automatiquement.

Pour contourner cette limitation, il est impératif d'utiliser les méthodes dédiées fournies par l'instance Vue ou le constructeur global.

Implémentation Correcte avec Vue.set

Lorsque vous devez ajouter une propriété réactive à un objet existant, la méthode standard est Vue.set ou son alias d'instance this.$set. Voici comment structurer cela correctement dans le cycle de vie d'un composant.

Exemple d'ajout d'une propriété dans le hook mounted :

export default {
  data() {
    return {
      profilUtilisateur: {
        nom: 'Dupont'
      }
    }
  },
  mounted() {
    // Ajout réactif d'un niveau de séniorité
    this.$set(this.profilUtilisateur, 'niveauSeniorite', 5)
  }
}

Il est important de noter que tenter d'assigner directement une propriété à la racine de l'instance Vue provoquera une erreur ou un comportement non réactif. Considérons l'initialisation suivante :

const instance = new Vue({
  data: {
    compteur: 1
  }
}).$mount('#application')

// Incorrect pour la réactivité racine
// instance._data.nouveauCompteur = 2 

// Correct : utilisation de l'API globale
Vue.set(instance._data, 'statut', 'actif')

Dans le cas d'objets imbriqués, la même logique s'applique. Si vous souhaitez enrichir un objet enfant avec une nouvelle information, vous devez cibler cet objet spécifique :

const app = new Vue({
  el: '#conteneur',
  data: {
    detailsCompte: {
      pseudo: 'DevMaster'
    }
  }
})

// Ajout d'un rôle utilisateur de manière réactive
Vue.set(app.detailsCompte, 'role', 'administrateur')

Analyse Technique des Méthodes set

Une question fréquente concerne la différence entre Vue.set et this.$set. L'analyse du code source révèle que ces deux API partagent la même implémentation sous-jacente.

Le constructeur Vue expose la fonction interne set directement :

import { set as setProperty } from '../observer/index'

Vue.set = setProperty

De manière similaire, le prototype de l'instance reçoit la même référence :

Vue.prototype.$set = setProperty

La fonction centrale set gère la logique de réactivité. Elle vérifie d'abord la validité de la cible (ni undefined, ni null, ni primitive). Ensuite, elle distingue deux cas principaux :

• Tableaux : Si la cible est un tableau et que la clé est un index valide, la méthode utilise splice pour déclencher les observateurs.
• Objets : Si la propriété existe déjà, une assignment simple suffit. Sinon, la fonction récupère l'observateur (__ob__) attaché à l'objet pour définir la nouvelle propriété comme réactive.

Une vérification de sécurité empêche également l'ajout de propriétés réactives sur l'instance Vue elle-même ou sur son objet $data racine durant l'exécution, encourageant les développeurs à déclarer toutes les propriétés nécessaires dès l'option data.