La réactivité en Vue.JS

Qu'est-ce que la réactivité ?

La réactivité est au cœur des frameworks de développement web dont Vue.jsFramework JavaScript populaire. fait partie. Mais qu'est-ce que cela signifie exactement ?

En termes simples, la réactivité peut être définie comme la capacité à suivre automatiquement les changements et à mettre à jour le DOM en conséquence, sans que le développeur n'ait à intervenir manuellement.

La réactivité dans Vue.Js

En mettant l'accent sur la simplicité et la flexibilité, Vue.js permet aux développeurs de créer des interfaces utilisateur dynamiques de manière intuitive. L'un de ses aspects les plus puissants est son système de réactivité qui facilite la gestion et la synchronisation des données au sein d'une application web.

Avec la sortie de Vue 3 (2020), le système de réactivité a fait l'objet d'une révision majeure pour améliorer les performances et la flexibilité. L'une des plus grandes différences est l'introduction de l'API Composition, qui introduit des fonctions telles que ref, reactive, computed, ou watch . Ces fonctions nous permettent de créer des variables et des propriétés dérivées qui se mettent à jour automatiquement lorsque leurs dépendances changent.

Contrairement à Vue 2, qui utilisait des objets et des getter/setters pour rendre les propriétés réactives, Vue 3 utilise des proxies. Cela permet une réactivité plus puissante, en particulier pour les objets imbriqués et les tableaux, tout en offrant une meilleure expérience de développement.

ref et reactive : Les bases de la réactivité

Dans Vue 3, ref et reactive sont les fonctions principales pour rendre les données réactives. ref est intéressant à utiliser pour créer une référence réactive à une valeur primitive (nombre, chaîne, booléen, etc.).

En utilisant ref, Vue.js crée en fait un proxy qui surveille les changements de la valeur et déclenche les mises à jour nécessaires dans le DOM.

import { ref } from 'vue';

const count = ref(0);
count.value++;  // Cela mettra à jour automatiquement le DOM si `count` est utilisé dans le template.

De son côté, reactive est utilisé pour créer un objet réactif à partir d'un objet JavaScript. Il est particulièrement utile pour les objets complexes ayant plusieurs propriétés, car toutes les propriétés de l'objet seront alors automatiquement réactives.

import { reactive } from 'vue';

const user = reactive({
  name: 'Alice',
  age: 25
});

user.age = 26; // Vue.js détecte ce changement et met à jour le DOM.

computed : Les propriétés calculées

Les propriétés computed (ou calculées) sont des fonctions qui calculent des valeurs à partir d'autres propriétés réactives. L'un des grands avantages des propriétés computed est qu'elles sont mises en cache : Vue.js ne recalculera la valeur d'une propriété computed que si l'une de ses dépendances réactives change.

import { ref, computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// `fullName` est automatiquement mis à jour si `firstName` ou `lastName` change.

watch : Surveiller les changements

En plus de ref, reactive et computed, Vue.js offre d'autres outils puissants pour gérer la réactivité de nos applications, notamment la fonction watch. watch est utilisée pour écouter explicitement les changements sur une ou plusieurs propriétés réactives et exécuter une fonction en réponse à ces changements. Cela peut être particulièrement utile pour exécuter des effets secondaires ou des opérations asynchrones lorsque certaines données changent.

import { ref, watch } from 'vue';

const userName = ref('John Doe');

watch(userName, (newName, oldName) => {
  console.log(`User name changed from ${oldName} to ${newName}`);
});

Dans cet exemple, chaque fois que la valeur de userName change, la fonction de rappel associée est déclenchée, ce qui permet de réagir aux changements. Contrairement aux propriétés computed, qui sont principalement utilisées pour les valeurs dérivées, watch est idéal pour les opérations qui n'affectent pas directement le DOM, comme les appels API ou la journalisation.

Autres concepts de réactivité en Vue.js

• shallowRef et shallowReactive

Vue.js propose également des versions « peu profondes » de ses fonctions réactives avec shallowRef et shallowReactive. Ces fonctions créent des références réactives, mais ne rendent pas les propriétés internes de l'objet réactives. En d'autres termes, les modifications apportées aux propriétés imbriquées ne déclenchent pas de mises à jour.

import { shallowReactive } from 'vue';

const userProfile = shallowReactive({
  name: 'Alice',
  settings: {
    theme: 'dark'
  }
});

userProfile.settings.theme = 'light'; // Ce changement ne déclenchera pas de mise à jour réactive

Cette approche permet d'optimiser les performances en limitant la réactivité aux propriétés.

• toRefs et customRef

Enfin, Vue.js offre des utilitaires avancés comme toRefs et customRef pour des scénarios de réactivité encore plus précis. toRefs est utile lorsque vous souhaitez passer un objet réactif à des composants enfants sans perdre la réactivité de ses propriétés. D'autre part, customRef nous permet de créer des refs personnalisées avec des comportements réactifs spécifiques, ce qui peut être intéressant pour les scénarios les plus complexes.

React, Angular ou Vue.js : quelles différences pour la réactivité ?

Comme pour Vue.js, les frameworks React ou Angular utilisent un DOM virtuel pour optimiser la mise à jour de l'interface utilisateur. Lorsqu'il y a un changement d'état, le framework ne met à jour que les parties pertinentes du DOM réel de manière efficace.

Cependant, le fonctionnement interne de la réactivité diffère selon le framework utilisé.

• Structure des données : Comme nous l'avons vu plus haut, la propriété ref de Vue.js est spécifiquement utilisé pour les primitives, tandis que la propriété reactive est utilisé pour les objets ou les tableaux. Angular (avec les Observable par exemple) et React (avec son hook useState) utilisent une approche plus générique pour la gestion des états sans distinction selon le type de donnée.
• Courbe d'apprentissage : Bien que les fonctions utilitaires proposés par Vue.js puissent sembler plus complexes de prime abord, l'API Composition de Vue.js est considérée comme plus facile à apprendre pour les débutants par rapport à l'injection de dépendance et à la détection de changement d'Angular ou aux modèles de gestion d'état de React.

Choisir le bon framework : nos conseils

Tous les frameworks ont leurs forces et leurs faiblesses, mais le système de réactivité de Vue.js reste l'un des plus faciles à maîtriser. Grâce à son système de proxy pour détecter les changements d'état, Vue 3 est plus rapide et plus efficace que Vue 2. De plus, la mise en cache automatique des propriétés « calculées » réduit le nombre de calculs nécessaires, augmentant ainsi l'efficacité. Que vous soyez un développeur expérimenté ou que vous débutiez dans le développement web, Vue.js offre un environnement accueillant et efficace pour créer des applications modernes.

Quel que soit le framework que vous choisissez pour votre projet, le plus important est que votre choix soit adapté aux besoins spécifiques de votre projet. Chaque framework a ses forces et ses faiblesses, et le meilleur choix dépendra souvent du contexte de développement, de l'équipe et des préférences personnelles, de l'évolution de l'application, de son utilisation ou encore de sa maintenance.

Que vous optiez pour Vue.js, React, Angular ou tout autre framework, l'essentiel est de travailler avec un outil qui vous facilite la tâche et vous permet de créer des applications performantes et maintenables. Le framework n'est qu'un outil. Un bon développeur ne sera pas celui qui est expert d'un seul framework mais plutôt celui qui saura s'adapter et répondre aux défis de chaque projet.

Si cet article vous a donné envie de tester Vue.js pour votre prochain projet, n'hésitez plus et allez jeter un oeil à la documentation officielle ici : https://vuejs.org/!