Comprendre l'API Composition introduite dans Vue.js 3

Un tutoriel de Laurent Bernabé

Le 2021-08-28 16:41:17, par tails, Membre chevronné

Bonjour à tous.

J'ai le plaisir de vous présenter un nouveau tutoriel, dont le but est de vous introduire l'API Composition avec Vue JS 3.

Vous pouvez le retrouver ici-même : Cours sur l'API Composition avec Vue JS 3

Vous pouvez également retrouver les cours sur VueJS du site ici : https://javascript.developpez.com/cours/?page=frameworks#vuejs.

En vous souhaitant une bonne lecture

Discussion forum

4 commentaires

gwyohm
Membre expérimenté
Salut,

Bravo pour ce cours introductif sur l'API de composition.

J'ai une remarque:

j’importe la fonction reactive (ligne 19) et je déclare une propriété john comme étant réactive (ligne 24-28). Attention ! Une référence de type reactive n’est pas encapsulée derrière un proxy, et donc mieux vaut déclarer ce genre de variables comme étant muable ! (Avec le mot-clé let). Et bien-sûr, je n’oublie pas d’exporter la référence john pour le template (ligne 43) ;

Je pense que c'est une erreur, l'objet passé en paramètre est bien wrappé dans un proxy.
https://v3.vuejs.org/api/basic-reactivity.html#reactive
Par ailleurs, déclarer un objet en const n'empêche pas d'écrire ses propriétés, ni d'en ajouter / supprimer. Ca empêche simplement de le réaffecter globalement la constante.
Code :
```
1
2
3
4
5
6
7
let jambon = reactive({});
jambon = 2; // pas de problème JS

const fromage = reactive({})
fromage.trou = false; // pas de problème
fromage = 2; // pas possible
```
Dans ce cas là, ca ne change pas beaucoup, mais si jambon est envoyé dans le template et qu'un événement change la valeur de jambon, ca ne va pas se passer comme on veut
Code :
```
1
2
3
4
5
6
7
8
setup() {
let jambon = reactive({});
setTimeout(() => {
  jambon = 2;
}, 5000);
return { jambon };
}
```
Je pense qu'il également intéressant de préciser qu'il est possible d'utiliser les APIs de composition avec vue2 en utilisant le plugin @vue/composition-api. Quand on a un projet conséquent en vue2, on peut "préparer" une migration en vue3 avec l'API de composition, et surtout arrêter de faire des mixins qui se transforment vite en plats de spaghetti. L'API n'est pas 100% couverte, mais on peut faire beaucoup de choses...
le 15/09/2021 à 13:20
SylvainPV
Rédacteur/Modérateur

J'étais dubitatif en voyant les premières ébauches de cette nouvelle API, surtout à cause du débat entre ref() et reactive(). Mais la RFC s'est améliorée avec le temps, et aujourd'hui j'en perçois bien l'intérêt.

D'ailleurs la dernière syntaxe `<script setup>` n'est pas abordée dans l'article il me semble. C'est un vrai plus en expérience développeur, je pense l'utiliser systématiquement plutôt que l'option `setup`

le 06/09/2021 à 16:52
tails
Membre chevronné
Envoyé par SylvainPV

J'étais dubitatif en voyant les premières ébauches de cette nouvelle API, surtout à cause du débat entre ref() et reactive(). Mais la RFC s'est améliorée avec le temps, et aujourd'hui j'en perçois bien l'intérêt.

D'ailleurs la dernière syntaxe `<script setup>` n'est pas abordée dans l'article il me semble. C'est un vrai plus en expérience développeur, je pense l'utiliser systématiquement plutôt que l'option `setup`

Bonjour

Excellente remarque

Effectivement, j'ai un peu joué avec la syntaxe script setup, mais je n'ai pas souhaité en parler pour la simple raison que :
- c'est très récent
- il semblerait que quelques éditeurs en lignes - en tous cas celui que j'ai testé : Stackblitz - ne supportent pas encore cette syntaxe.
Sinon, à titre personnel, je trouve l'API Composition bien plus simple à aborder que les Hooks de React
le 06/09/2021 à 17:02
tails
Membre chevronné
Envoyé par gwyohm

Par ailleurs, déclarer un objet en const n'empêche pas d'écrire ses propriétés, ni d'en ajouter / supprimer. Ca empêche simplement de le réaffecter globalement la constante.

Code :

1
2
3
4
5
6
7
let jambon = reactive({}); jambon = 2; // pas de problème JS const fromage = reactive({}) fromage.trou = false; // pas de problème fromage = 2; // pas possible

Dans ce cas là, ca ne change pas beaucoup, mais si jambon est envoyé dans le template et qu'un événement change la valeur de jambon, ca ne va pas se passer comme on veut

Code :

1
2
3
4
5
6
7
8
setup() { let jambon = reactive({}); setTimeout(() => { jambon = 2; }, 5000); return { jambon }; }
Merci, excellente remarque également : je m'excuse pour cette erreur

Je pense qu'il également intéressant de préciser qu'il est possible d'utiliser les APIs de composition avec vue2 en utilisant le plugin @vue/composition-api. Quand on a un projet conséquent en vue2, on peut "préparer" une migration en vue3 avec l'API de composition, et surtout arrêter de faire des mixins qui se transforment vite en plats de spaghetti. L'API n'est pas 100% couverte, mais on peut faire beaucoup de choses...

Effectivement, j'avais oublié ce détail. Je m'en suis moi-même servi avec certaines librairies qui ne supportent pas encore Vue3 (Il me semble que Nativescript-Vue est encore à Vue2 en ce moment. En tous cas j'avais un projet où je suis passé par cette solution).

Merci encore beaucoup pour ces remarques pertinentes : il y a des chances pour que je mette à jour le tutoriel en me basant dessus.
le 15/09/2021 à 14:01