Logo - laConsole

Formation Vue 3 | Comprendre la Réactivité

Découvrez les bases de la réactivité avec Vue.js afin de simplifier le processus de création d'interfaces dynamiques et interactives.

Icône de calendrier
Intermédiaire
10 chapitres

Comprendre la réactivité

La réactivité est un principe fondamental de Vue.js permettant la mise à jour automatique de l’interface utilisateur en réponse aux changements apportés à l’état (ou “state”) de notre application.

Le state fait référence aux données qui représentent l’état d’une application à un moment donné. Ces données peuvent être stockées dans des variables, des objets ou d’autres structures de stockage, et peuvent être modifiées en réponse aux interactions utilisateur ou à d’autres événements.

L’état est un concept clé dans le développement d’applications réactives, car il permet de maintenir une cohérence entre la logique de l’application et son interface utilisateur.

Initialisation

Chargement de Vue.js

copié ! 
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Le framework Vue.js ayant été chargé avec un lien CDN, nous allons maintenant devoir lui préciser quelle partie de la page contrôler ; en d’autres termes, où s’exécuter.

Considérons la structure HTML suivante :

index.html
copié ! 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Démo Vue</title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
</html>

Création de l’application

Pour commencer, nous créons une constante (généralement nommée app) qui va contenir notre instance d’application Vue.js, créée avec la méthode createApp(). On dit qu’on crée le composant racine de notre application.

copié ! 
<body>
	<div id="app"></div>
	<script>
		const app = Vue.createApp({});
	</script>
</body>

Nous spécifierons par la suite des options au sein de notre objet vide {}.

Vous constaterez ici qu’on accède à createApp depuis l’objet global Vue qui nous est importé via le lien CDN.

Montage de l’application

Enfin, avec la méthode mount(), précisons sur quelle partie de notre page web Vue.js devra s’exécuter (on dit qu’on « monte » notre application). La balise jouant le rôle de conteneur Vue.js est généralement identifiée par #app, mais cet identifiant pourrait être tout autre.

On prendra l’habitude de chaîner les méthodes createApp() et mount() pour simplifier le code.

copié ! 
const vm = Vue.createApp({}).mount("#app");

Dorénavant, notre élément HTML #app agit en tant que conteneur de notre SPA (Single Page Application).

Notre application étant instanciée et montée, vous remarquerez qu’elle ne fait pas grand-chose… c’est parce que nous ne lui avons pas encore défini d’état et de méthodes.

Etat (données)

Déclaration

Pour pouvoir être utilisées au sein de notre page, les données doivent être déclarées et stockées quelque part, au sein d’une sorte de dictionnaire de données. Et ce dictionnaire se trouve dans l’objet retourné par la fonction data(). On dit qu’il s’agit de l’état de notre application.

copié ! 
const vm = Vue.createApp({
	data() {
		return {
			message: "Welcome les devs !",
			languages: ["JavaScript", "PHP", "HTML", "CSS"]
		}
	}
}).mount("#app");

Concrètement, on fait passer en argument de la méthode createApp() un objet contenant une fonction data() qui renverra les données nécessaires pour notre application.

Affichage

Pour afficher le contenu des variables sur la page, on utilise la syntaxe suivante : {{ nomVariable }}.

copié ! 
<div id="app">
	<h1>{{ message }}</h1>
</div>

Comme nous l’avons évoqué, cette donnée est réactive. Cela signifie qu’au moindre changement de l’état, elle sera également mise à jour sur la page.

Vous en conviendrez, la modification d’une variable dans la console n’est pas idéale. Il va donc nous être nécessaire d’apporter une couche d’interaction à notre application, et cela passera par les méthodes et directives.

Injecter de la logique au sein des templates

Notez qu’il est tout à fait possible d’injecter de la logique au sein des templates via par exemple l’utilisation d’une condition ternaire au sein des accolades {{ ... }} :

copié ! 
<p>
	{{ firstname }} {{ lastname}} 
	{{ languages.length >= 5 ? "est confirmé" : "est encore en apprentissage" }}.
</p>

Si la propriété languages comporte au moins 5 éléments, alors “est confirmé” sera retourné, sinon “est encore en apprentissage” le sera.

Méthodes (actions)

Déclaration

Nous avons vu que la fonction data() nous permet de retourner des données à notre instance de Vue.js. Et bien il est également possible de lui définir des méthodes qui exécuteront des actions au sein de l’objet methods.

copié ! 
data() {
	return { ... }
},
methods: {
	method1() { ... },
	method2() { ... }
}

Pour faire référence à une donnée de l’application, on procédera avec le mot-clé this, comme dans un objet classique.

copié ! 
data() {
	return {
		firstname: "James",
		lastname: "Bond"
	}
},
methods: {
	presentation() {
		return `${this.lastname}, ${this.firstname} ${this.lastname}.`;
	}
}

Appel

Pour appeler une méthode depuis nos templates HTML, on utilise la syntaxe {{ maFonction() }}, en y précisant le nom de la méthode concernée :

copié ! 
<div id="app">
	<p>{{ presentation() }}</p>
</div>