Vue.js 3.0 est devenu plus rapide, plus petit en taille de fichier et équipé d’une meilleure prise en charge de TypeScript. Il apporte des lots de nouveautés, notamment le plus attendu API Composition :
API Composition :
La nouveauté majeure de Vue 3 est l’API Composition, elle présente l’avantage d’organiser les codes, de les réutiliser, d’améliorer la lisibilité.
Elle existait en tant que plugin sur Vue 2 mais maintenant intégrée dans Vue 3 sans aucune configuration supplémentaire.
Vue 3 supporte toujours l’API Options qui est traditionnellement utilisée dans Vue 2. Vue 3 offre une grande souplesse et flexibilité sur l’utilisation de ces deux API, on peut utiliser soit avec l’API Options, soit avec l’API Composition, soit les deux ensembles.
Voici comment fonctionne l’API Composition qui se dote d’un nouveau ‘setup”. D’abord, prenons un exemple de code avec l’API Options :
Maintenant, avec l’API Composition :
On peut voir que l’API Composition peut combiner les codes: méthodes, propriétés calculées, observateurs…, ce qui n’aurait pas pu être possible avec l’API Options. Dans l’exemple ci-dessus, les codes ‘quantité’ et ‘changement coloris’ sont clairement séparés.
On note que le mot ‘this’ n’est plus utilisé.
À mesure que la taille du composant augmente, l’organisation du code devient un facteur important. La séparation des codes en des sections distinctes améliore la lecture et fait gagner du temps.
L’utilisation des Mixins pouvait être utilisée de la même manière. Cependant, selon la complexité des codes, il peut être difficile à maintenir, de suivre les états et les méthodes dans différents composants. De plus, le Mixins a le potentiel d’écraser l’état ou les méthodes.
Pour la réutilisation, on peut séparer le code ‘quantité’ et ‘changement coloris’ dans chacun des composants. Prenons l’exemple du changement de coloris, dans un fichier js :
Et sur le composant principal, avec les codes modifiés :
Template racine multiple :
Dans Vue 2, la balise template ne peut prendre qu’un seul élément racine, c’est un dire un élément <div> (ou autre) contenant des éléments enfants.
Si on mettait deux <div>, on a immédiatement une erreur. Il fallait les englober dans une seule balise.
Dans Vue 3, cette restriction est levée, l’élément racine n’est plus obligatoire.
Teleport :
Teleport est une fonctionnalité intéressante qui permet de “téléporter” une partie du code sur une destination dans le DOM. Il peut être utile si on veut agencer un layout selon l’affichage bureau ou mobile (un peu à la manière de detach et append) ou encore téléporter le code dans une modal… le tout paramétrable.
Un plugin tiers existe sur Vue 2, nommé Portal-vue. Dans Vue 3, Teleport est intégré et est facile à utiliser.
Vue 3 a une balise spéciale nommée <teleport>, et tout code inclus dans cette balise sera prêt à être téléporté n’importe où. La balise teleport prend un argument to et peut être défini de différente manière :
Voici un exemple :
La destination peut être définie avec une propriété réactive, de cette manière on peut téléporter à des destinations différentes :
Suspense :
Suspense est un nouveau composant spécial qui restitue un composant de secours (fallback) puis, jusqu’à ce que les données soient récupérées (généralement par un appel avec une API), un composant par défaut.
Suspense est une alternative du conditionnel v-if qui facilite le développement.
A l’intérieur d’une balise Suspense, on a deux templates, une template ‘defaut’, qui affichera les données récupérées, et une template ‘fallback’ dans lequel on peut ajouter une animation d’attente, un loader par exemple.
Multiple v-model :
v-model est utilisé pour les liaisons bidirectionnelles de données dans des éléments de formulaire ou même des composants personnalisés. Dans Vue 2, un composant personnalisé ne peut avoir qu’un seul v-model dans la balise.
Vue 3 a enlevé la limitation et on peut utiliser plusieurs v-model et spécifier les liaisons séparément :
A l’intérieur du composant my-form :
Conclusion :
Avec ses lots de nouveautés, Vue 3 facilite grandement le développement Front end, avec sa grande souplesse, flexibilité, performance, réactivité et qualité.
Il existe d’autres nouveautés à découvrir, la plus marquante est celle de l’API Composition. Elle demandera un petit temps d’adaptation mais le jeu en vaut largement la chandelle.
Découvrez des articles similaires
