Tracking des changements sous VueJS

VueJS, en tant que librairie JS MVVM, intègre le  two-way data-binding. Ainsi, lorsque que le view modèle (que l'on appelera vm) change, la vue liée est mise à jour (re-render).

Dans VueJS, la partie view modèle se situe au niveau de la propriété "data".

new Vue({
    data: {
        message: 'Un message'
    }
});

Pour tracker tout changement sur les propriétés de data, VueJS utilise le mécanisme de getters / setters introduit dans ES5, via Object.defineProperty.

A l'initialisation de l'instance de VueJS, des getters / setters sont crées pour toutes les propriétés contenue dans data.

Dans l'exemple ci-dessus, l'instance de VueJS contient une propriété message. A son initialisation, des getters et setters sont crées pour la propriété message.

Ainsi, toute modification d'un propriété contenue dans data se fait implicitement via son setter associé, qui notifie un watcher chargé de déclencher la mise à jour de la vue. VueJS utilise par ailleurs le virtual DOM afin de modifier uniquement l'élement du DOM impacté.

https://vuejs.org/v2/guide/reactivity.html

L'utilisation des getters / setters pour tracker toute modification de la data implique aussi quelques restrictions. En effet, la création des getter / setter (qui servent d'observateurs) se fait à l'initialisation de l'instance de VueJS. Ainsi, une fois que la vm est instanciée, il n'est plus possible de rajouter des propriétés trackable dans data, sans passer par des méthodes spéciales de la librairie.

C'est pourquoi l'une des bests-practice de VueJS consiste à déclarer toutes les propriété de la vm directement dans la propriété data, en les initialisant à null par exemple, afin de les rendre trackable.