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.
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.
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'.
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.
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:
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 “[[ ]]”.
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.
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».
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.
Les commentaires sont désactivés en mode Aperçu.
Source link