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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

VueJS Discussion :

[Tutoriel] Cours sur l'API Composition avec Vue JS 3 [Tutoriel]


Sujet :

VueJS

  1. #1
    Membre chevronné
    Avatar de tails
    Homme Profil pro
    Inscrit en
    novembre 2003
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations forums :
    Inscription : novembre 2003
    Messages : 799
    Points : 2 095
    Points
    2 095
    Billets dans le blog
    15
    Par défaut [Tutoriel] Cours sur l'API Composition avec Vue JS 3
    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/co...ameworks#vuejs.

    En vous souhaitant une bonne lecture

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 298
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 298
    Points : 9 685
    Points
    9 685
    Par défaut
    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`
    One Web to rule them all

  3. #3
    Membre chevronné
    Avatar de tails
    Homme Profil pro
    Inscrit en
    novembre 2003
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations forums :
    Inscription : novembre 2003
    Messages : 799
    Points : 2 095
    Points
    2 095
    Billets dans le blog
    15
    Par défaut
    Citation Envoyé par SylvainPV Voir le message
    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

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    899
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 899
    Points : 1 285
    Points
    1 285
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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...
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  5. #5
    Membre chevronné
    Avatar de tails
    Homme Profil pro
    Inscrit en
    novembre 2003
    Messages
    799
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Pyrénées Atlantiques (Aquitaine)

    Informations forums :
    Inscription : novembre 2003
    Messages : 799
    Points : 2 095
    Points
    2 095
    Billets dans le blog
    15
    Par défaut
    Citation Envoyé par gwyohm Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

Discussions similaires

  1. Réponses: 19
    Dernier message: 09/04/2021, 10h23
  2. Réponses: 2
    Dernier message: 05/07/2019, 11h54
  3. Cours sur l'api hooking
    Par bouazza92 dans le forum C++
    Réponses: 10
    Dernier message: 20/03/2006, 12h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo