Fermer

janvier 3, 2020

Vue Composition API – Qu'est-ce que c'est et comment l'utiliser?


La prochaine version de Vue approche à grands pas et nous pouvons déjà essayer de nouvelles fonctionnalités, comme Vue Composition API, qui est fortement inspirée de React Hooks. Beaucoup de développeurs en sont ravis, d'autres n'en sont pas si sûrs. Voyons comment l'utiliser et quel est le problème.

Tout récemment, l'équipe principale de Vue a publié la version pré-alpha de la prochaine version de Vue – Vue 3. Elle est plus rapide que la Vue 2 actuelle et offrira également de nouvelles et fonctionnalités intéressantes. L'une de ces fonctionnalités est l'API Vue Composition.

L'API Composition est fortement inspirée de React Hooks . En tant que développeur qui travaille quotidiennement avec React et Vue, je ne pourrais pas être plus satisfait de cette fonctionnalité. Cela nous permettra de créer une logique métier réutilisable et dynamique et de faciliter l'organisation du code associé. De plus, il est exempt de mises en garde qui existent dans React Hooks. Par exemple, dans React, les hooks ne peuvent pas être appelés conditionnellement et sont appelés à chaque rendu. Vous pouvez en savoir plus sur les différences ici . Quoi qu'il en soit, quel est le gros problème avec cette API de composition?

Vue est très facile à utiliser et possède une excellente API conviviale pour les débutants et simple à comprendre. Cependant, lorsque les composants deviennent de plus en plus gros, il est beaucoup plus difficile de les maintenir et de les comprendre, car différents éléments de la logique métier sont mélangés. À l'heure actuelle, il existe plusieurs façons de gérer cela, par exemple, les mixins, les composants d'ordre supérieur (HOC) et les emplacements de portée, mais chacun d'eux a ses propres inconvénients.

Par exemple, les HOC sont un modèle dérivé de React dans lequel un composant est encapsulé avec un autre composant qui répartit les méthodes / valeurs d'état réutilisables dans le premier. Cependant, ce modèle ne fonctionne pas vraiment bien avec les composants à fichier unique, et je n'ai pas vu beaucoup de développeurs adopter des HOC dans Vue.

Les mixins, en revanche, sont assez simples car ils fusionnent des propriétés d'objet comme des données, des méthodes, des calculs, etc., dans un composant via la propriété mixins . Malheureusement, quand il y a de plus en plus de mixins, les chances de nommer les collisions sont plus élevées. De plus, il n'est pas si évident d'où viennent certaines méthodes et certains états. Il peut être nécessaire de parcourir tous les mixins pour trouver une définition de méthode particulière.

Je ne suis fan ni des mixins ni des HOC, et en cas de besoin, je choisirais toujours des emplacements de portée. Cependant, les emplacements délimités ne sont pas non plus une solution miracle, car vous pourriez vous retrouver avec beaucoup d'entre eux à un moment donné et, fondamentalement, de plus en plus de composants sont créés uniquement dans le but de fournir un moyen de créer une logique avec état réutilisable.

Ensuite, examinons l'API Composition et son fonctionnement. Pour cela, nous allons créer un nouveau projet et l'essayer!

Mise en route

Échafaudez un nouveau projet avec Vue-Cli. Vous pouvez suivre les instructions d'installation de la documentation . Nous utiliserons un package appelé @ vue / composition-api car il nous permettra d'essayer la nouvelle API. Après avoir configuré le projet et installé la bibliothèque requise, ouvrez le fichier ‘main.js’ et ajoutez ces lignes afin que nous puissions utiliser de nouvelles fonctionnalités.
Vue.use (VueCompositionApi);

Commençons par un exemple simple. Créez un nouveau composant appelé Count.vue . Il n'aura qu'un bouton, un compteur, une propriété calculée et une méthode pour incrémenter le nombre. Simple, mais il montre comment les éléments cruciaux des composants Vue, à savoir l'état des «données», les propriétés calculées et les méthodes, peuvent être créés.

   

Nous avons une nouvelle propriété appelée setup . C'est là que nous pouvons utiliser des fonctions pour créer un état, des propriétés calculées, etc. La méthode setup devrait renvoyer un objet qui inclura tout ce qui devrait être disponible dans notre composant.

Nous avons importé deux fonctions – réactives et calculé. Vous pouvez probablement deviner ce que cela signifie. Réactif est en fait un équivalent de Vue.observable qui est disponible dans Vue 2, tandis que calculé n'a pas vraiment besoin d'explications supplémentaires. C'est juste une façon différente de créer directement une valeur calculée.

Vous pouvez maintenant importer le composant Count.vue dans le App.vue et l'essayer dans votre navigateur.

   

Ceci est un exemple simple, mais essayons de faire quelque chose de plus sophistiqué que vous pourriez potentiellement utiliser dans un projet. Créons une fonction appelée useApi qui aura un état pour les données api_status et initFetch . Il acceptera un objet url et options . Nous l'utiliserons pour récupérer un chien au hasard dans l'API dog.ceo . Créez un nouveau composant appelé Dog.vue et entre

Source link