Dans ce chapitre nous allons explorer plus en profondeur le fonctionnement de la réactivité pour comprendre comment Vue.js gère la synchronisation entre le DOM et l'état. Nous allons pour cela explorer le code générer lorsque l'on construit le projet.
unref()
Lorsqu'on avait vu la partie template on a remarqué qu'il n'était pas nécessaire d'écrire le .value lorsque l'on fait référence à une ref. En analysant le code compilé on remarque que Vue.js utilise systèmatiquement unref() lors de l'accès au variable de premier niveau. Cette méthode permet d'accéder à la propriété value si l'objet reçu est une ref.
Ainsi <h1>{{ msg }}</h1> devient :
createElementVNode("h1", null, toDisplayString(unref(msg)), 1),VirtualDOM
Le second point est l'utilisation du virtual dom. Un composant est une fonction qui va renvoyer un objet représentant la structure attendu. Cette structure est appelée du virtual DOM. Lorsque l'état change, la fonction est re-exécutée pour renvoyer une nouvelle structure virtual DOM. En comparant cette structure à la précédente Vue.js sera capable de déterminer les changements à faire au niveau du DOM réel.
Watchers
Maintenant si on regarde le code d'un composant compilé voici ce que l'on obtient :
const __sfc__ = {
__name: 'App',
setup(__props) {
const msg = ref('hello')
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode("h1", null, _toDisplayString(msg.value), 1 /* TEXT */),
_withDirectives(_createElementVNode("input", {
"onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((msg).value = $event))
}, null, 512 /* NEED_PATCH */), [
[_vModelText, msg.value]
])
], 64 /* STABLE_FRAGMENT */))
}
}La fonction qui génère le Virtual DOM va agir comme un watchEffect() et Vue.js détectera automatiquement de quel variable dynamique la fonction dépend. Lorsque la valeur d'une de ces variable change, Vue.js saura qu'il doit générer une nouvelle version du Virtual DOM.
