IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Comprendre l’API Composition introduite dans Vue.JS 3

Ce tutoriel a pour objectif de vous initier à la nouvelle Composition API de VueJS, introduite avec la version 3.

4 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Tout d’abord, pour suivre ce tutoriel, vous devez être familiers avec le framework VueJS : la version 2 est largement suffisante. (Voir les tutoriels existants sur le site : Tutoriels VueJS existants sur le site developpez.comTutoriels VueJS existants sur le site developpez.com)

Avec l’arrivée de la version 3 du framework Vue JS, les développeurs disposent d’une nouvelle façon de coder le script de leurs composants : la Composition API, par opposition à l’Option API, qui elle est déjà présente depuis les versions précédentes.

L’objectif annoncé de cette nouvelle organisation est de permettre de découpler plus facilement les logiques du composant en responsabilités uniques, notamment lorsque le projet prend de plus en plus d’ampleur.

Pour vous donner un exemple très rapide, voici un extrait de code d’un composant écrit dans l’API Option. D’ailleurs, vous pouvez remarquer la définition de trois propriétés data bg_1bg_2, bg_3 et (lignes 19-21), et leurs utilisations dans le template (lignes 3-5).

Bref exemple de script de composant dans l'Option API
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<template>
 <div id="app">
 <MyBox :bg="bg_1" @click="handleClick(bg_1)" />
 <MyBox :bg="bg_2" @click="handleClick(bg_2)" />
 <MyBox :bg="bg_3" @click="handleClick(bg_3)" />
 </div>
</template>

<script>
import MyBox from './components/MyBox.vue'

export default {
  name: 'App',
  components: {
    MyBox
  },
  data() {
    return {
      bg_1: 'yellow',
      bg_2: 'red',
      bg_3: 'green',
    };
  },
  methods: {
    handleClick(bg) {
      console.log(this.bg_1 + " " + this.bg_2 + " " + this.bg_3);
      alert(bg);
    }
  },
  mounted() {
    console.log('Application started');
  }
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
</style>

MyBox est un simple composant Vue JS carré de taille fixe, que j’ai importé (ligne 10) et instancié trois fois (lignes 3-5).

Aperçu de l'application exemple
Aperçu de l'application exemple

Cette application est basique, à chaque clic sur l’un des carrés, un dialogue de message personnalisé s’affiche (avec en l’occurrence la couleur en anglais du carré cliqué).

Vous pouvez entre autres remarquer l’utilisation du cycle de vie Mounted (lignes 29-31): il exécute la logique ainsi définie dès que le composant en question est monté. Mais vous pouvez aussi remarquer la définition de propriétés (fonction data: lignes 17-23) et de méthodes (section methods : lignes 24-28).

Voici une version possible de ce composant dans l’API Composition.

Bref exemple de script de composant dans la Composition API
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<template>
  <div id="app">
    <MyBox :bg="bg_1" @click="handleClick(bg_1)" />
    <MyBox :bg="bg_2" @click="handleClick(bg_2)" />
    <MyBox :bg="bg_3" @click="handleClick(bg_3)" />
  </div>
</template>

<script>
import MyBox from './components/MyBox.vue'

import {onMounted} from 'vue';

export default {
  name: 'App',
  components: {
    MyBox
  },
  setup() {
    const bg_1 = 'yellow';
    const bg_2 = 'red';
    const bg_3 = 'green';

    function handleClick(bg) {
      alert(bg);
    }

    onMounted(() => {
      console.log('Application started');
    })

    return {
      bg_1, bg_2, bg_3, handleClick,
    };
  },
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
</style>

Tout d’abord, vous pouvez remarquer la déclaration d’une fonction setup (ligne 19) : c’est dans celle-ci que nous définissons les différents éléments de l’API Composition.

Vous pouvez y voir :

  • les données réactives (ici nous n’avons que des constantes, mais vous verrez plus tard comment déclarer des données réactives) ;
  • les fonctions à utiliser dans le template du composant ;
  • les propriétés calculées (ou, en anglais, computed) ;
  • les fonctions d’observation (watch) ;
  • et les réactions aux différents cycles de vie du composant.

En revanche, les propriétés du composant, ainsi que ses dépendances (clé components) se déclarent comme dans l’API Option.

Ensuite, vous pouvez remarquer que nous retournons dans cette fonction les éléments que l’on souhaite exposer pour le template : les trois constantes bg_* (où l’étoile remplace un numéro) (lignes 20-22), ainsi que la fonction handleClick(lignes 24-26). Pour cela, on retourne un objet où les clés correspondent aux noms des éléments et les valeurs correspondent simplement à leurs valeurs. (Ici j’ai utilisé l’écriture condensée.) (lignes 32-34).

Enfin, l’utilisation du cycle de vie Mounted, par l’utilisation de la fonction onMounted (lignes 28-30), qui accepte une fonction en paramètre, sans argument. Veuillez également noter l’import correspondant (ligne 12).

La fonction setup est exécutée à chaque fois que le composant est monté.

II. Éléments de l’API Composition

Dans ce chapitre, qui ne se veut pas exhaustif, nous allons voir divers éléments de l’API Composition. N’hésitez pas à aller voir la page officielle de Vue JS 3 en cas de besoin : Page officielle de Vue JS 3 : API CompositionPage officielle de Vue JS 3 : API Composition.

II-A. Un maximum de flexibilité

Tout d’abord, sachez que rien ne vous oblige à utiliser l’API Composition avec Vue 3. Vous pouvez très bien :

  • n’utiliser que l’API Option : attention toutefois aux éléments dépréciés par Vue 3 !;
  • n’utiliser que l’API Composition ;
  • ou bien même mixer les deux : déclarer certains de vos composants avec l’API Option et d’autres avec l’API Composition.

II-B. Disparition du mot-clé this

Vous l’aurez peut-être remarqué dans l’introduction, mais avec l’API Composition on n’utilise plus le mot-clé this. Et pour cause : il n’est plus possible de l’utiliser.

Et pour chaque cas où l’on disposait du mot-clé this dans l’écriture API Option, il existe une solution de remplacement. Y compris pour les fonctions introduites par Vuex (la bibliothèque de gestion de valeurs globales pour Vue) et Vue-Router (la bibliothèque de gestion des pages de votre site Vue JS).

Nous les passerons en revue au fur et à mesure de notre progression dans ce tutoriel.

II-C. Données réactives

Dans l’exemple d’introduction, nous avons remplacé la section data par plusieurs constantes. Mais si l’on devait se limiter aux constantes dans la Composition API, on perdrait à coup sûr en flexibilité au sein de notre application. Heureusement, il est possible de définir et d’exporter des propriétés réactives pour le template.

II-C-1. Propriété ref (référence)

Le premier type de référence que nous allons aborder est représenté par les références créées avec le mot-clé ref.

Voici un exemple simple :

Simple compteur utilisant des ref
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
<template>
  <div id="app">
    <button @click="handleDown">-</button>
    {{ counter }}
    <button @click="handleUp">+</button>
  </div>
</template>

<script>
import {ref} from 'vue';

export default {
  name: 'App',
  setup() {
    const counter = ref(0);

    function handleUp() {
      counter.value++;
    }

    function handleDown() {
      if (counter.value > 0) counter.value--;
    }

    return {
      counter, handleUp, handleDown,
    };
  },
};
</script>

<style>
</style>

Tout d’abord, veuillez noter l’import de la fonction ref (ligne 10).

Nous déclarons une variable counter, en tant que référence. (ligne 15). Pour cela, nous appelons la fonction ref, à laquelle nous donnons en paramètre la valeur initiale de notre référence.

La fonction nous retourne donc en quelque sorte un Proxy, c’est-à-dire un objet encapsulant la valeur réelle de la référence. Cela a deux conséquences directes :

  1. Au sein de votre fonction setup , la référence devra systématiquement être accédée par l’intermédiaire de sa propriété value. (lignes 18 et 22) ;
  2. En revanche, dans le template, chaque référence sera automatiquement convertie par sa valeur réelle : on ne suffixe donc pas le nom de la référence par .value. (ligne 4)

D’ailleurs, c’est cette caractéristique qui fait que j’ai pu déclarer la propriété counter comme étant immuable (const).

Évidemment, tout comme dans la fonction data de l’API Option, il est possible de déclarer et exporter autant de références que l’on souhaite.

II-C-2. Propriété réactive (reactive)

Admettons que l’on souhaite adapter l’écriture API Option suivante :

Section data avec une propriété complexe.
Sélectionnez
data() {
   return {
      john&#160;: {
         firstName&#160;: "John",
         lastName&#160;: "Doe",
          age&#160;: 32,
      }
   }&#160;;
}

Si l’on devait adapter la propriété john dans l’API Composition avec des ref, on serait obligé de scinder cette propriété en trois références distinctes. Fort heureusement, pour ceux qui souhaitent éviter cela, il existe une autre solution : les propriétés réactives.

Voici un exemple d’utilisation :

Section data avec une propriété complexe : reactive.
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
<template>
  <div id="app">
    <input type="text" v-model="john.firstName" />
    <input type="text" v-model="john.lastName" />
    <input type="number" v-model="john.age" />

    <button @click="reset">Reset</button>

  <p>
    {{ john.firstName }} {{ john.lastName }}
  </p>
  <p>
    {{ john.age }}
  </p>
  </div>
</template>

<script>
import {reactive} from 'vue';

export default {
  name: 'App',
  setup() {
    let john = reactive({
      firstName: "John",
      lastName: "Doe",
      age: 32
    });

    function reset() {
      /* Ne fonctionne pas
      john = {
        firstName: "John",
        lastName: "Doe",
        age: 32
      };
      */
     john.firstName = "John";
     john.lastName = "Doe";
     john.age = 32;
    }

    return {john, reset};
  },
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
}
</style>
Aperçu de l'application
Aperçu de l'application

Ainsi :

  • 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 est certes encapsulée derrière un proxy, mais on ne peut pas la réaffecter dans sa globalité. C’est-à-dire que l’on pourra modifier/ajouter des propriétés, mais pas la valeur complète. 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) ;
  • pour modifier la valeur de la référence réactive dans la fonction setup, il faut obligatoirement modifier les propriétés une à la fois (si toutefois l’on souhaite réellement en modifier plusieurs, voire toutes). Mais en tout cas, inutile d’essayer de modifier les différentes valeurs en attribuant un nouvel objet à la variable, sinon, il n’y aura pas de nouveau rendu du composant déclenché. (lignes 30-41) ;
  • enfin, on accède simplement aux valeurs dans le template . (lignes 3-5, 10, 13).

Veuillez également noter, qu’avec une variable de type reactive, si sa valeur au moment de l’exportation dans le bloc return est de type objet ({}), tenter par la suite de la réaffecter dans une valeur primitive (par exemple 2) n’aura pas d’effet : la variable réactive conservera sa précédente valeur. En revanche, rien ne nous interdit de le faire dans la fonction setup, avant l’exportation : mais dans ce cas précis, la variable étant devenue en quelque sorte une valeur primitive, là aussi, tenter de modifier sa valeur par la suite (par un évènement par exemple ou un appel à setTimeoutau sein de la fonction setup), n’aura aucun effet.

Les variables de type reactive semblent donc présenter davantage de subtilités que les variables de type ref.

II-D. Arguments de la fonction setup

La fonction setup peut accepter aucun, un ou bien deux arguments, en fonction de nos besoins. Ces arguments existent notamment parce que dans la fonction setup, l’utilisation du mot-clé this a forcément disparu (Attention, il s’agit de $this avec Vue JS 2, et this avec Vue JS 3).

II-D-1. Argument props

Le premier argument permet d’accéder aux propriétés du composant. Ainsi, ce code en version API Option :

Composant défini avec l'API Option
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="alertColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  methods: {
    alertColor() {
      alert(this.bg);
    }
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>

où l’on définit la méthode alertColor avec le mot-clé this afin d’accéder à la propriété bg (ligne 20), devra être légèrement adapté si l’on veut utiliser l’API Composition :

Composant défini avec l'API Composition
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="alertColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  setup(props) {
    function alertColor() {
      alert(props.bg);
    }

    return {alertColor};
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>

Ainsi, nous avons simplement utilisé la méthode setup avec un premier paramètre props, et accédé à la propriété bg de la variable props. (lignes 18-24)

Veuillez également remarquer que le nom props n’est nullement imposé.

II-D-2. Argument context

Une autre fonctionnalité qui n’est plus disponible à cause de la disparition du mot-clé this est la possibilité d’émettre un évènement depuis notre composant. Et c’est justement pour combler cela que l’on peut déclarer un deuxième argument à la méthode setup.

Pour s’en rendre compte, voici d’abord un composant défini avec l’API Option, ainsi que son utilisation dans un composant Application :

Composant défini dans l'API Option
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="informMyColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  methods: {
    informMyColor() {
      this.$emit('colorInfo', `My color is ${this.bg}`);
    }
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>
Composant App
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<template>
  <div id="app">
    <MyBox bg="red" @colorInfo="handleColorInfo" />
  </div>
</template>

<script>
import MyBox from './components/MyBox';
export default {
  name: 'App',
  components: {
    MyBox,
  },
  setup() {
    function handleColorInfo(msg) {
      alert(msg);
    }

    return {handleColorInfo};
  }
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
}
</style>

Par ailleurs, vous pouvez constater qu’il est possible d’utiliser à la fois des composants définis dans l’API Option et d’autres dans l’API Composition.

Vous pouvez donc remarquer en ligne 20 du composant MyBox, l’utilisation de this.$emit afin d’émettre un évènement.

Voici le même composant défini avec l’API Composition.

Composant défini avec l'API Composition
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="informMyColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  setup(props, context) {
    function informMyColor() {
      context.emit('colorInfo', `My color is ${props.bg}`);
    }

    return {informMyColor};
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>

Ainsi, grâce au deuxième argument context (ligne 18), nous pouvons de nouveau émettre un évènement : context.emit(ligne 20). Même remarque que précédemment : le nom context n’est nullement imposé. Également, rien ne vous empêche d’utiliser le signe underscore en lieu et place du paramètre props ou bien en préfixe, dans le cas où ce paramètre ne vous serait pas utile.

Enfin pour rappel, la fonction emit admet deux arguments :

  1. Le nom choisi pour l’évènement ;
  2. La valeur à transmettre pour l’évènement : que ce soit une valeur primitive, un tableau ou un objet.

II-E. Propriétés calculées

Il est également possible de définir des propriétés calculées (computed) avec l’API Composition.

À titre d’exemple, reprenons l’exemple précédent, en l’enrichissant un tout petit peu.

Composant utilisant computed dans l'API Composition
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="informMyColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
import {computed} from 'vue';
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  setup(props, context) {

    const bangBackground = computed(() => `!!!${props.bg}!!!`);

    function informMyColor() {
      context.emit('colorInfo', `My color is ${bangBackground.value}`);
    }

    return {informMyColor};
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>

Et le composant application App :

Fichier App.vue
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<template>
  <div id="app">
    <MyBox :bg="background" @colorInfo="handleColorInfo" />
    <button @click="changeColor">Change my color</button>
  </div>
</template>

<script>
import MyBox from './components/MyBox';
import {ref} from 'vue';

export default {
  name: 'App',
  components: {
    MyBox,
  },
  setup() {
    function handleColorInfo(msg) {
      alert(msg);
    }

    const background = ref('yellow');

    function changeColor() {
      background.value = 'green';
    }

    return {background, handleColorInfo, changeColor};
  }
};
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
}
</style>
Image non disponible

Dans cette application, en appuyant sur le bouton Alert my color, l’information est mise à jour en fonction de la couleur du composant (que l’on peut changer avec le deuxième bouton).

En ligne 11 du fichier composant, nous importons la fonction computed, et ensuite nous l’utilisons afin de définir une nouvelle propriété bangBackground (ligne 21) à l’aide de cette fonction.

Ainsi cette propriété bangBackground est une référence de type proxy, et nous devons donc accéder à sa valeur par l’intermédiaire de sa propriété value (ligne 24). Cette propriété fonctionne comme les propriétés calculées de l’API Option, se mettant automatiquement à jour avec la valeur de la propriété de base.

Il est même possible de créer une propriété calculée à partir de propriété référence/réactive, voire de mélanger props/refs/reactives dans une même propriété calculée.

Comme dans cette version du composant :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
<template>
  <div class="myBoxRoot">
    <div class="myBoxLayer1"></div>
    <div class="myBoxLayer2" :style="{backgroundColor: bg}">
      <button @click="informMyColor">Alert my color</button>
    </div>
  </div>
</template>

<script>
import {computed, ref, reactive} from 'vue';
export default {
  props: {
    bg: {
      type: String,
      default: 'white',
    },
  },
  setup(props, context) {

    const decorator = ref('!!!');
    let number = reactive({number: 1});
    const bangBackground = computed(() => `${decorator.value}${props.bg}${decorator.value}-${number.number}`);

    function informMyColor() {
      context.emit('colorInfo', `My color is ${bangBackground.value}`);
    }

    setTimeout(() => {
      decorator.value = '@@@';
    }, 2000);

    setInterval(() => {
      number.number++;
    }, 1000);

    return {informMyColor};
  }
}
</script>

<style>
.myBoxRoot {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: blue;
}

.myBoxLayer1 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: yellow;
}

.myBoxLayer2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: green;
}
</style>

II-F. Observateurs

Il est aussi possible de mettre en place des observateurs (watchers) avec l’API Composition. Il existe plusieurs manières d’utiliser la fonction watch, ici je ne m’attarderai que sur deux cas précis :

  1. L’observation d’une propriété référence ;
  2. L’observation d’une valeur unique d’une propriété réactive.

II-F-1. Observation d’une propriété référence

L’observation d’une propriété référence est on en peut plus simple :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
<script>
import {ref, watch} from "vue";

export default {
   setup() {
       const myRef = ref&#160;;
       watch(myRef, (newValue, oldValue) => {
           console.log(newValue)&#160;;
           console.log(oldValue)&#160;;
       })&#160;;
   }
}
</script>

Le premier paramètre prend donc la référence à observer, et le deuxième paramètre prend une fonction dont les arguments sont dans l’ordre la nouvelle valeur et la valeur précédente.

À noter qu’il est possible de convertir des propriétés reçues dans le composant en références, à l’aide de la fonction toRefs.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
<script>
import {ref, toRefs, watch} from "vue"&#160;;

export default {
   props&#160;: {
      bg&#160;: {
         type&#160;: Number,
         required&#160;: true,
      },
      name&#160;: {
         type&#160;: String,
         default&#160;: "John",
      },
   },
   setup(props) {
       const {bg, name} = toRefs(props)&#160;;
       watch(bg, (newValue, oldValue) => {
           console.log("new bg: "+newValue)&#160;;
           console.log("old bg": +oldValue)&#160;;
       })&#160;;
       watch(name, (newValue, oldValue) => {
           console.log("new name&#160;:"+newValue)&#160;;
           console.log("old name&#160;:"+oldValue)&#160;;
       })&#160;;

       return {}&#160;;
   }
}
</script>

II-F-2. Observation d’une valeur d’une propriété réactive

Pour observer une valeur d’une propriété réactive, la syntaxe est à peine plus complexe, car en premier paramètre, il faut cette fois passer une fonction précisant quelle valeur on souhaite extraire :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
<script>
import {reactive, watch} from 'vue'&#160;;

export default {
   setup() {
       const john = reactive({
         name: 'john',
         age: 32,
       })&#160;;
       watch(() => john.age, (newValue) => { 
         console.log('John is', newValue, 'years old');
       })&#160;;

       setInterval(() => john.age++, 1000);

       return {}&#160;;
   }
}
</script>

Ici je n’ai pas voulu récupérer l’ancienne valeur de john.age dans la fonction passée à watch, mais c’est également possible (à l’instar de l’utilisation de la fonction computed).

II-G. Cycle de vie d’un composant

Pour gérer un cycle de vie à l’intérieur de la fonction setup, rien de plus simple : il suffit d’utiliser la fonction onXXX équivalente. Veuillez noter qu’il n’y a pas d’équivalent pour les cycles de vie beforeCreate et created : c’est déjà le rôle de la fonction setup.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
<script>
import {onBeforeUnmount, onUpdated} from "vue"&#160;;

export default {
   setup() {
      onUpdated(() => console.log("Updated my component")&#160;;
      onBeforeUnmount(() => console.log("About to unmount my component")&#160;;
      return {}&#160;;
   }
}
</script>

II-H. API Composition et Vuex

Pour ceux d’entre vous qui utilisent Vuex, le framework de gestion d’état global pour Vue, vous vous êtes sûrement demandé ce qu’il advient de son utilisation avec l’API Composition.

La réponse est simple, dans la dernière version, installable avec npm install vuex@next (évidemment vous pouvez aussi utiliser yarn au lieu de npm), les développeurs ont prévu des fonctions équivalentes afin de pouvoir utiliser Vuex avec l’API Composition. (Notez bien que la version next, correspondait à la version 4.0.2 lors de la rédaction du tutoriel.)

Sans vouloir être exhaustif encore une fois, la documentation officiellela documentation officielle Vuex API Composition est disponible pour cela et sera plus à même de vous présenter des informations mises à jour, dans cette section je vais essayer de répondre à cette problématique.

Tout d’abord, admettons que nous définissons un simple store pour notre application fictive VueJS. Ce store sera le même dans les versions API Option et API Composition de notre exemple. Il s’agit d’ailleurs de l’exemple de la documentation officielle de Vuex 3.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Rien de compliqué : il s’agit d’un compteur disposant d’une méthode mutatrice increment.

Je pars du principe que vous savez déjà comment déclarer votre application VueJS comme dépendante de Vuex et de votre store.

Dans l’API Option, afin d’émettre une mutation de type increment sur notre store, nous pouvons nous y prendre de la manière suivante :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

Évidemment, pour l’API Composition, le problème réside dans l’utilisation du mot-clé this.

Pour contourner ce problème, il suffit donc d’importer la fonction depuis Vuex (que vous aurez bien sûr pensé à mettre à jour) afin de créer une référence sur notre store et la fonction computed afin de surveiller les modifications du store :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup () {
    const store = useStore()
    
    const increment = computed(() => {
        store.commit('increment');
        
        // Evidemment d&#233;conseill&#233;
        console.log(store.state.count);
    });
    
    return {
        increment,
    }
  }
}

N’oubliez pas également qu’accéder directement aux états du store est considéré comme une mauvaise pratique.

De la même manière, vous disposez de la fonction store.dispatch afin notamment de faire appel à des mutations asynchrones du store.

Encore une fois, n’hésitez pas à consulter la documentation officielledocumentation officielle de Vuex 4.

II-I. API Composition et Vue Router

Le framework Vue Router, pour gérer la navigation dans les différentes pages de votre site Single Page Application, est également « impacté » par l’utilisation de l’API Composition, mais la transition, à l’instar de l’utilisation de Vuex, n’est pas très complexe.

Pour cela, il faut utiliser une version récente de Vue Router : lors de la rédaction, la version next correspondait à la version 4.0.11 . La documentation officielleLa documentation officielle de Vue Router avec l'API Composition est également là pour vous aider dans votre éventuelle transition.

Là aussi, je pars du principe que vous savez utiliser Vue Router et que vous savez la configurer pour votre application.

Dans l’API Option, vous disposez de deux objets très importants depuis le mot-clé this : this.$route et this.$router.

Dans l’API Composition, il suffit :

  1. D’importer les fonctions useRoute et useRouter depuis la librairie vue-router ;
  2. De créer une référence à partir de ces fonctions ;
  3. D’appeler les fonctions disponibles depuis ces références presque comme l’on ferait depuis l’API Option.

Voici un court script d’exemple dans l’API Composition :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()

 
    const exampleUseFunction() {
        // ...
        const query = route.query;
        const params = route.params;
        // ...
    }
    
    return {
        exampleUseFunction,
    }
}

De même, il existe des fonctions pour les navigation guards, notamment beforeRouteLeave, beforeRouteUpdate (exemple adapté depuis la documentation officielle):

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
import { onBeforeRouteLeave } from 'vue-router'
import { ref } from 'vue'

export default {
  setup() {
   // from is from where we try to exit
   // to is the destination page
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // cancels the navigation and stays on the same page
      if (!answer) return false
    })
    
    return {};

  },
}

II-J. Utiliser l’API Composition avec Vue JS 2

Sachez qu’il est possible d’utiliser l’API Composition avec la version 2 de Vue JS. Pour cela vous pouvez installer le plugin Vue JS @vue/composition-api, notamment à l’aide de votre gestionnaire de paquets NPMNode JS ou YarnYarn le cas échéant.

Par contre, cela ne va pas sans limitation : vous pouvez les retrouver sur la page NPM du paquetpage NPM du paquet composition-api.

II-K. La nouvelle syntaxe script setup

Si vous écrivez des composants définis en uniques fichiers (Single File Component en anglais), vous pouvez en plus utiliser la syntaxe « script setup ».

Il s’agit d’un simplification de l’API Composition dans laquelle notamment

  • l’instruction return n’est plus nécessaire ;
  • l’ensemble des éléments déclarés est exporté pour la partie template ;
  • tout code déclaré dans cette section est exécuté à chaque fois que le composant est créé.

Voici un bref exemple, extrait de la documentation officielle :

 
Sélectionnez
<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

Ainsi la variable msg et la fonction log seront directement disponibles dans la partie template du composant fichier unique.

En revanche, il est fort probable que la plupart des éditeurs en ligne (tels que StackBlitzl'éditeur en ligne StackBlitz) ne reconnaissent pas encore cette syntaxe.

III. Conclusion et remerciements

Voilà, c’est la fin de cette brève introduction sur l’API Composition de Vue JS 3.

N’hésitez pas à consulter la documentation officielleLa documentation officielle de Vue JS 3 sur l'API Composition,.

Je tiens à remercier Mickaël Baron pour sa relecture technique.

Je tiens aussi à remercier escartefigue pour sa relecture orthographique.

Je souhaite également remercier SylvainPVSylvainPV et gwyohmgwyohm pour leurs remarques très pertinentes sur le forum.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Licence Creative Commons
Le contenu de cet article est rédigé par Laurent Bernabé et est mis à disposition selon les termes de la Licence Creative Commons Attribution 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.