Wedge Digital - Vue 3 API Composition

Vue.js chez Wedge Digital

Chez Wedge Digital nous ne jurons que par Vue.js pour nos applications front. Pour plein de raisons, ça pourrait faire l’objet d’un article en soi.

Je pense que François Schneider, notre CTO a retourné toutes les possibilités du framework pour qu’on en ai une utilisation optimale et nous garde à l’oeil pour qu’on maintienne ses bonnes pratiques ^^.

Pourquoi je vous parle de ça ? Parce que tous nos projets sont sur Vue2 (options API) et que ça fait un moment qu’on suit Vue 3 (compositions API) de près pour savoir quand sera le bon moment pour commencer un projet avec.

Aujourd’hui, je fais un tour d’horizon sur Vue 3 de ma vision d’utilisatrice quotidienne de Vue2, histoire d’être prêts à l’intégrer dans nos futurs projets dès que les feus seront au vert.

Vue d’ensemble des nouveautés

Vue 3 a pour ambition de simplifier la lecture de composants sur de grosses applications où les fonctionnalités restent nombreuses même en découpant au maximum. L’objectif est également d‘utiliser le pouvoir des composants c’est-à-dire leur autonomie vis-à-vis du composant parent mais aussi de l’application. On veut faire des composants réutilisables partout, pourvu que ce soit dans du Vue.js !

Bien, en vrai on garde quoi de vue 2 ? Beaucoup de choses : l’architecture générale des fichiers, toute la partie html, le système d’import de props et de composants :

import Feed from "./Feed.vue"

export default {
props: {
news: Object,
newsIndex: Number,
},
components: {
Feed,
},
}

Et qu’est-ce qui change ? Principalement le gros setup() dans notre export default qui va return tous les éléments disponibles dans notre composant. On ne dissocie plus les “data”, les “computed”, les “methods”, etc… On va désormais faire tout ça dans le “setup” et ainsi pouvoir bien dissocier les fonctionnalités.

Imaginons :

setup() {
mes données concernant une 1ère fonctionnalité:
- mes variables
- mes méthodes (methods, computed, mounted, created, etc...)

mes données concernant une 2ème fonctionnalité:
- mes variables
- mes méthodes (methods, computed, mounted, created, etc...)

et on return ce dont on a besoin à l'extérieur.
}

Une fois qu’on sait ça, il ne reste plus qu’à se familiariser avec comment on intègre effectivement tout ce qu’on faisait dans Vue 2. Et comme rien ne vaut un exemple, commençons par les “data”. Ceci :

data() {
return {
loading: false,
editing: null,
variable: "",
}
},

devient cela :

import { ref } from "vue"

setup() {
const loading = ref(false)
const news = ref([])
const variable = ""
}

Et c’est à ce moment précis que généralement, on se dit “ah ok, trop compliqué, on comprend rien, merci bye !”. Mais revenez, faites-moi confiance. L’import déjà : dans l’objectif d’avoir des composants complètement indépendants, Vue3 part du principe qu’on ne va importer dans chaque composant uniquement ce dont il a besoin pour fonctionner. Ici ref.

Ref, c’est la fonction Vue, qui va rendre nos variables réactives. Dans mon exemple ci-dessous “loading” et “news” sont réactifs, tandis que “variable” est un exemple de valeur qui n’a pas besoin de l’être et est donc déclarée comme n’importe quelle constante en Javascript.

Et Setup, on en a déjà parlé plus haut. Alors ? Pas si compliqué hein ?

On poursuit avec computed, avant on avait :

computed: {
channel(() => {
return this.news[this.newsIndex];
})
},

Dans Vue 3, on aura :

import { ref, computed } from "vue"

setup(props) {
const channel = computed(() => news[props.newsIndex])
}
// Pour rappel, newsIndex a été importé plus haut

Elle a encore ajouté des trucs bizarres 😭

Mais non ! Décomposons : computed, et bien comme dis plus haut, on a besoin d’une valeur “computed”, on l’importe.

Pourquoi maintenant la fonction “setup” à un argument props ? Et bien plus haut, je vous ai indiqué qu’on importait les propriétés du composant comme avant. Et bien, pour pouvoir les utiliser, on doit ajouter l’objet props en arguments de setup et puis juste les utiliser dans notre fonction, comme du bon vieux Javascript.

Viennent ensuite les méthodes. On reste sur du Javascript classique, on écrit sa fonction dans son setup, par ex :

function updatedTime() {
return date.now()
}

Une chose que je n’ai pas encore précisée, c’est comment on utilise les variables ou fonctions qu’on a créées dans notre setup. Et bien dans un return, tout simplement.

import { ref } from "vue"

setup() {
const loading = ref(false)
const news = ref([])
const variable = ""

return {
loading,
news,
channel,
updatedTime
}
}

Nous avons fait le tour des basiques. On pourrait parler des cycles de vie d’un composant Vue, comme “mounted” ou “updated” qui existent toujours mais qu’on intègre également dans notre setup en important pour ces 2 cas onMounted et onUpdated. Exemple:

setup() {
// mounted
onMounted(() => console.log('Component is mounted!'))
}

Le cas “created” n’existe plus tel quel puisque que les fonctions habituellement mises dans “created” et “beforeCreate” sont écrites directement dans le setup avec Vue 3.

Voilà pour cette 1ère approche, dans un prochain article, nous pourrons vraiment mettre en pratique Vue 3 en prenant un composant Vue 2 existant et simuler le passage en Vue 3 et peut-être aller plus loin sur les fonctionnalités telles que Vue X ou VueRouter très utilisés chez Wedge Digital.