La réactivité dans Vue

Rappels

JavaScript n’est pas réactif par défaut

let a = 0

const b = 40

const c = a + b

c // 40

a = 2

c // 40 (pas de changement, car JS n’est pas réactif)

ref()

Nous avons vu en introduction comment utiliser ref() : cette fonction renvoie un objet dont la seule propriété qui nous intéresse est value :

const count = ref(0)

count.value // 0

count.value = 1 // Assignation d’une nouvelle valeur

count.value // 1

count.value++ // Incrémentation de 1

count.value // 2

Utilisation de computed()

computed() est aussi une fonction, qui renvoie aussi un objet dont la seule propriété dont il faut tenir compte est value.

Cependant, elle prendra en paramètre une fonction, qui sera exécutée à chaque fois que l’une de ses dépendances change, et la nouvelle valeur sera mise en cache (pour ne pas la recalculer à chaque lecture).

const a = ref(0)
const b = ref(40)

const c = computed(() => a + b) // a et b seront 2 dépendances de cette `computed` (valeur calculée)

c.value // 40

a.value++
c.value // 41
b.value++
c.value // 42

Non seulement la valeur sera recalculée immédiatement à chaque changement de l’une de ses dépendances, mais si jamais cette valeur calculée est utilisée dans la partie <template> du SFC, le DOM de ce composant et de l’application sera modifiée automatiquement aussi.

Le DOM sera aussi modifié à chaque changement d’une ref utilisée dans la template.

Il y a encore beaucoup de choses à dire sur la réactivité, il est déjà possible de faire beaucoup de choses avec simplement ref() et computed().