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 balises ajoutez ce code:
import {reactive, computed, toRefs} de "@ vue / composition-api";
const useApi = (url, options = {}) => {
état const = réactif ({
données: null,
api_status: ""
});
const initFetch = async () => {
essayez {
state.api_status = "FETCHING";
réponse const = attente de récupération (url);
const data = attente de response.json ();
state.data = data.message;
state.api_status = "FETCHING_SUCCESS";
} catch (erreur) {
state.api_status = "FETCHING_ERROR";
}
};
if (options.hasOwnProperty ("fetchImmediately") && options.fetchImmediately) {
initFetch ();
}
revenir {
... toRefs (état),
initFetch
};
};
Cette fois-ci, outre réactif et calculé nous importons également vers des récifs . Je vais expliquer pourquoi nous en avons besoin dans un instant. Dans les fonctions useApi, nous avons déclaré état constant qui contient des données réactives et api_status . De plus, nous avons la fonction initFetch qui mettra à jour api_status ainsi que des données d'extraction pour une URL fournie comme argument.
Ensuite, nous vérifions si l'objet options a la propriété fetchImmediately . Il sera utilisé pour indiquer si un appel API doit être initialisé lors de la création d'un composant. Enfin, nous renvoyons un objet avec des valeurs d'états répartis et la fonction initFetch . Comme vous pouvez le voir, nous ne diffusons pas directement l'État, mais nous répartissons plutôt le résultat des fonctions toRefs . La raison en est que lorsque les valeurs renvoyées par l'État seraient déstructurées, elles ne seraient plus réactives. Par conséquent, toRefs encapsule chaque valeur dans une référence grâce à laquelle les valeurs d'état entraînent un nouveau rendu du composant Vue comme il se doit lorsque les valeurs d'état sont modifiées.
Le ] La fonction useApi est maintenant prête à être utilisée, configurons donc le reste du composant.
export default {
installer() {
const {data, api_status, initFetch} = useApi (
"https://dog.ceo/api/breeds/image/random",
{
fetchImmédiatement: vrai
}
);
revenir {
dogImage: données,
api_status,
fetchDog: initFetch
};
}
};
Comme je l'ai mentionné précédemment, nous pouvons détruire les propriétés dont nous avons besoin à partir de useApi sans perdre la réactivité. De plus, l'objet renvoyé par l'installation a renommé les propriétés pour mieux indiquer à quoi elles servent. Maintenant, la dernière chose à ajouter est le modèle.
Le modèle se compose de quelques divs qui sont rendus conditionnellement en fonction de api_status . En raison du passage de fetchImmediately: true à useApi un chien choisi au hasard sera récupéré au début, et vous pouvez en chercher un autre en cliquant sur le Fetch dog bouton. Il initialisera la fonction fetchDog qui est essentiellement la fonction initFetch renvoyée par la fonction useApi . La dernière étape consiste à importer le composant Dog.vue dans App.vue et à le rendre.
C'est tout ce dont nous avons besoin. Vous disposez maintenant d'une fonction réutilisable pour récupérer des données qui peuvent être réutilisées dans vos composants. Si vous le souhaitez, vous pouvez devenir plus créatif et l'améliorer davantage. Si vous souhaitez en savoir plus sur l'API Vue Composition, jetez un œil à la documentation . Vous pouvez trouver le code dans mon référentiel GitHub .
Source link