12 trucs et astuces pour améliorer vos projets Vue

Profitez de ces astuces puissantes pour tirer le meilleur parti de vos applications et projets Vue. Vous en trouverez beaucoup dans la documentation de Vue.

Lorsque vous démarrez avec un nouveau cadre, il peut être difficile de tout savoir. Vue.js est un framework étonnant, puissant et facile à apprendre. Aujourd'hui, je souhaite partager avec vous quelques conseils et astuces pouvant s'avérer utiles pour vos projets Vue.

1. $ createElement

Il n'est pas documenté dans la documentation de Vue, mais chaque instance de Vue a accès à la méthode $ createElement, qui peut créer et renvoyer des nœuds virtuels. Vous pouvez, par exemple, l’utiliser si vous souhaitez préparer le balisage dans vos méthodes, puis le transmettre à la directive ‘v-html’. Vous avez également accès à cette méthode dans les composants fonctionnels, qui la reçoivent comme premier paramètre de la fonction de rendu.

Imaginez que vous ayez une application de presse et que vous disposiez d'un composant pour afficher un article. Ce composant pourrait extraire un article pour un itinéraire tel que "www.news.com/article/:articleId". En règle générale, vous initialisez un appel d'API dans le crochet de cycle de vie «créé» pour extraire les détails de l'article.

Vous disposez également des fonctionnalités de l'article précédent et suivant, qui permettent aux utilisateurs de continuer. Si un utilisateur modifie un article, rien ne se passe, c'est pourquoi nous avons besoin d'un observateur pour récupérer les données d'un nouvel article.

Cependant, dans ce cas nous appelons la méthode 'fetchArticle' à la fois dans le crochet et l'observateur «créés». Heureusement, nous pouvons changer cela en utilisant la propriété "immédiate" pour l'observateur.

Le gestionnaire sera invoqué immédiatement lors de la création du composant. Sachez cependant que , les gestionnaires d’observation immédiats seront exécutés juste après tout élément du crochet "créé". Ainsi, si, pour une raison quelconque, vous devez extraire des données avant que quelque chose d’autre ne se produise dans le crochet créé, vous devrez les avoir deux fois et démissionner du serveur. 'immédiat' prop.

3. Réutilisation d'un composant pour le même itinéraire

Dans certains cas, vous pouvez avoir plusieurs itinéraires utilisant le même composant. Toutefois, par défaut, si vous changez entre ces itinéraires, le composant Ceci est normal car Vue réutilise le composant existant déjà pour des raisons de performances. Toutefois, si vous souhaitez que le composant soit recréé, vous pouvez fournir le support ": key" au " ”Composant.

4. $ on ('hook: ’)

C’est une autre astuce qui, à mon avis, n’a toujours pas été documentée. Souvent, si vous utilisez un plug-in tiers ou avez besoin d'ajouter un écouteur d'événement personnalisé, vous le définissez d'abord dans le hook créé ou monté, puis supprimez-le dans le crochet «beforeDestroy». Il est très important de supprimer les écouteurs d’événements afin que votre code ne provoque pas de fuites de mémoire. Parfois, les plugins peuvent avoir une méthode 'destroy'.

Avec l'utilisation de $ on ('hook :), vous pouvez éviter la définition d'un autre hook de cycle de vie.

5. Custom v-model

Par défaut, v-model est la fonctionnalité sucre syntaxique sur le programme d'écoute d'événements «@input» et «: valeur» prop. Saviez-vous que vous pouvez réellement spécifier quel événement et quelle valeur doit être utilisé? Vous pouvez facilement le faire en spécifiant la propriété 'model' dans votre composant Vue.

6. Validation des accessoires

La plupart du temps, vous pourrez très bien valider vos accessoires. en fournissant String, Object, etc. Cependant, les accessoires peuvent également être validés à l'aide de validateurs personnalisés. Par exemple, si vous souhaitez obtenir une chaîne qui doit correspondre à n'importe quelle chaîne d'une liste de chaînes, vous pouvez procéder de la manière suivante:

7. Délimiteurs

Vue utilise les doubles accolades “{{}}” pour les expressions dans les fichiers HTML et les modèles. Malheureusement, il peut entrer en collision avec d'autres moteurs, par exemple si vous utilisez des modèles Jinja, qui utilisent également des doubles accolades. Heureusement, Vue offre un moyen de modifier les délimiteurs utilisés dans vos modèles. Vous pouvez donc utiliser les doubles crochets “[[ ]]”.

8. Composants fonctionnels

Ce n'est pas vraiment une astuce, mais quelque chose que vous devriez utiliser dans vos projets.En général, si vous avez un composant qui n'accepte que les accessoires, restitue le balisage et n'utilise rien de l'occurrence Vue, comme les hooks de cycle de vie, les propriétés calculées, les méthodes, etc. ou un modèle de données, vous pouvez alors fournir l’option «fonctionnelle» et lui attribuer la valeur true pour indiquer que ce composant ne doit pas avoir l’instance Vue. Vous pouvez également le faire en fournissant un accessoire «fonctionnel» sur le modèle.

L’avantage des composants fonctionnels est qu’ils sont beaucoup moins chers à restituer que les composants avec état. Cependant, faites attention lorsque vous encapsulez des composants avec état dans des composants avec état, car les composants sont toujours restitués et provoqueront également le rendu des composants avec état.

JSX

Quelque chose pour les amoureux de React. Depuis la sortie de Vue CLI 3, JSX est pris en charge par défaut dans Vue et si votre projet est sur une version antérieure de Vue CLI, vous pouvez utiliser le plug-in babel-plugin-transform-vue-jsx. Je l'utilise souvent, en particulier dans les composants fonctionnels, car écrire des fonctions de rendu pures peut s'avérer fastidieux.

Extraits de code

Les extraits de code peuvent vous faire gagner du temps, car vous pouvez écrire du code rapidement. Par exemple, dans Visual Studio Code avec ces deux extraits configurés, je peux créer un code de base pour les composants avec état et fonctionnel en tapant «vtemp» ou «vfcomp».

11. Vetur

Je ne suis pas sûr des autres éditeurs de code, mais si vous utilisez Visual Studio Code, vous devez certainement consulter le plug-in Vetur, qui fournit des fonctionnalités pratiques très utiles telles que la coloration syntaxique, le linting et la vérification des erreurs, le formatage , emmet, etc.

12. Enregistrement automatique des composants de base

La plupart du temps, un projet utilise des composants qui sont utilisés à plusieurs reprises et leur importation dans presque tous les composants est assez fastidieuse. utilisés presque partout, ils peuvent être importés et enregistrés une seule fois dans le monde. Vous pouvez les considérer comme des composants "de base" de votre application. Ce script peut enregistrer automatiquement tous les composants de base.

Importez ensuite cette méthode dans votre main.js fi les et initialisez-le.

Quel est votre conseil préféré?

Ce ne sont là que quelques conseils et astuces qui, je l’espère, vous seront utiles. N’oubliez pas de partager avec d’autres vos conseils! N'hésitez pas à laisser vos propres favoris dans les commentaires ci-dessous.

Pour plus d'informations sur le développement de Vue

Vous souhaitez en savoir plus sur la création d'excellentes interfaces utilisateur avec Vue? Découvrez Kendo UI pour Vue notre bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il inclut tous les composants dont vous aurez besoin, des grilles et graphiques aux planificateurs et aux cadrans.