Amélioration de l'application Vue.js. Quelques conseils pratiques

 

   (( item.name ))
 

...et nous verrons une erreur comme celle-ci :

Nous pouvons y remédier en en utilisant JSX et un composant fonctionnelOn peut aussi passer un booléen qui remplacera le v-if.

</>

Ne pas écrire les gestionnaires d'appels d'api dans les composants

En fait, ce n'est qu'un des exemples de ce qu'il ne faut pas faire dans les composants. Il suffit de faire ce qui est localement nécessaire dans la logique des composants. Toute méthode qui pourrait être externe devrait être séparée et appelée uniquement dans les composants, par exemple la logique métier.

Exemple :

Au lieu d'une méthode comme celle-ci :

créé() (
this.fetchArticles() ;
),
méthodes : (
 async fetchArticles() (
  try (
    const data = await axios.get(url) ;
    this.articles = data.articles ;
    ) catch (e) (
    // gérer l'erreur
    )
  )
)

Écrivez quelque chose comme ceci - appelez simplement la méthode appropriée qui renverra les résultats de l'API :

 async fetchArticles() (
   try (
     this.articles = await ArticlesService.fetchAll() ;
   ) catch (e) (
     // gérer l'erreur
   )
  )

Utiliser des créneaux plutôt que de grandes quantités d'accessoires

Parfois, l'utilisation d'accessoires est suffisante, mais il y a aussi des cas où ils ne sont pas efficaces. Cela peut se produire dans des situations où nous devrions ajouter trop d'accessoires pour que le composant fonctionne comme nous le souhaitons. L'exemple le plus simple est celui d'un bouton. Il s'agit sans aucun doute d'un composant qui peut être utilisé n'importe où dans une application. Considérons donc un composant de type bouton comme celui-ci.

(( texte ))

A ce stade, il s'agit d'un simple composant qui n'accepte que du texte. Ok, mais ce n'est peut-être pas suffisant car nous aurons besoin d'icônes dans le bouton. Dans ce cas, nous devons ajouter 2 autres accessoires (2, parce que nous voulons avoir l'option d'ajouter avant ou après le texte). Ainsi, le composant ressemblera à ceci :

(( texte ))

Ce n'est pas mal, nous n'avons que 3 accessoires, mais...

Et si nous avions besoin d'un indicateur de chargement ? Eh bien, nous devrions ajouter un autre accessoire. Et ce, pour chaque nouvelle fonctionnalité ! Suivre l'augmentation du nombre de composants vous semble-t-il un défi aujourd'hui ? Oui, sans aucun doute !

Utilisons plutôt des créneaux.

Plus simple, non ? Ok, mais comment pouvons-nous obtenir la fonction d'ajout d'icône ? C'est très simple ! Il suffit d'utiliser le composant comme ceci :

Retour

Suivant

Un moyen simple d'améliorer les performances

Je vais partager avec vous quelques conseils qui sont vraiment faciles à mettre en œuvre, afin que vous puissiez en bénéficier immédiatement.

Itinéraires de chargement paresseux

Parfois, nous avons des routes qui ne sont disponibles que pour les administrateurs, ou les utilisateurs ayant un accès particulier, elles peuvent également être moins visitées que d'autres. Ce sont des cas parfaits pour l'utilisation de la route lazy load.

Il suffit d'utiliser la fonction arrow dans la propriété de votre composant pour renvoyer la fonction d'importation :

 export default new VueRouter (
   (
     mode : 'history',
     routes : [
       (
         path : '/landing',
         component : () => import('../pages/p-welcome'),
         name : 'welcome'
       ),
  ...

Au lieu de :

import PWelcome from '@/pages/p-welcome' ;

export default new VueRouter (
(
mode : 'history',
routes : [
(
chemin : '/landing',
composant : PWelcome, //composant juste importé
name : 'welcome'
),

Chargement paresseux des composants Vue

Une situation similaire peut se produire avec Composants Vue. Nous pouvons importer paresseusement des composants d'un seul fichier comme ceci :

const lazyComponent = () => import('pathToComponent.vue')
export default (
composants : (lazyComponent )
)

// Autre syntaxe
export default (
composants : (
lazyComponent : () => import('pathToComponent.vue')
)
)

Grâce au chargement paresseux de ce composant, il ne sera téléchargé que lorsqu'il sera demandé. Par exemple, si nous avons un composant avec v-if, il ne sera demandé que si le composant doit être rendu. Ainsi, si la valeur v-if n'est pas vraie, le composant ne sera pas chargé. C'est pourquoi l'importation paresseuse peut également être utilisée pour les composants de type JavaScript dossiers.

Bonus : Lorsque l'on utilise Vue CLI 3+, toutes les ressources chargées paresseusement sont préfixées par défaut !

Utiliser des enveloppes transparentes au lieu d'attributs accessoires

Prenons l'exemple d'un composant comme celui-ci :

Sans aucun problème, nous pouvons l'utiliser comme suit :

ou

Cela fonctionne, car Vue vous permet de transmettre des attributs html au composant, même si vous ne les avez pas déclarés en tant qu'accessoires. Les attributs html sont appliqués à l'élément racine du composant (input, dans ce cas).

Le problème apparaît lorsque nous voulons développer notre composant d'entrée, car il pourrait ressembler à ceci :

<code> <template>
   <div class="form-group">
     <label :for="id">(( étiquette ))</label>
     <input
       :id="id"
       :value="value"
       class="base-input"
       @input="$emit('input', $event.target.value)"
     >
   </div>
 </template>

Maintenant, en utilisant le composant de cette façon :

ne fonctionnera pas comme nous le souhaitons, car le type et l'espace réservé seront appliqués à div (l'élément racine) et cela n'a aucun sens. Nous devons donc nous en occuper, car nous voulons ajouter nos attributs à l'élément input. Votre première pensée peut être "ajoutons les accessoires dont nous avons besoin !" et bien sûr cela fonctionnera, mais... que se passe-t-il si nous voulons utiliser type, autocomplétion, espace réservé, autofocus, handicapé, mode d'entréeetc., nous devons alors définir les props pour chaque attribut html. Personnellement, je n'aime pas cette longue méthode, alors cherchons quelque chose de mieux !

Nous pouvons traiter l'ensemble du problème en seulement deux lignes.

<template>
  <div class="form-group">
    <label :for="id">(( étiquette ))</label>
    <!-- pay attention to v-bind="$attrs" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false, // <- pay attention to this line
  props: ['value', 'label', 'id']
);
</script>

Nous pouvons utiliser v-bind= "$attrs" et transmettre les attributs directement à <input> sans déclarer d'énormes quantités d'accessoires. N'oubliez pas non plus d'ajouter l'option inheritAttrs : false afin de ne pas transmettre les attributs à l'élément racine. Allons un peu plus loin : que se passe-t-il si nous avons besoin d'ajouter des récepteurs d'événements à cette entrée ? Encore une fois, cela pourrait être géré par des accessoires ou des événements personnalisés, mais il y a une meilleure solution.

<template>
  <div class="form-group">
    <label :for="id">(( étiquette ))</label>
    <!-- pay attention to v-on="listeners" -->
    <input
      :id="id"
      v-bind="$attrs"
      :value="value"
      class="base-input"
      v-on="listeners"
    >
</div>
</template>

<script>
export default (
  name: 'BaseInput',
  inheritAttrs: false,
  props: ['value', 'label', 'id'],
  computed: (
    listeners() (
      return (
        ...this.$listeners,
        input: event => this.$emit('input', event.target.value)
      );
    )
  )
);
</script>

Il existe une nouvelle propriété calculée qui renvoie le composant pour les auditeurs et ajoute l'auditeur d'entrée. Nous utilisons cette entrée calculée en écrivant simplement v-on="listeners".

Utiliser l'observateur avec l'option immediate au lieu du crochet créé et de l'observateur ensemble

Nous récupérons souvent des données sur un crochet créé (ou monté), mais nous devons ensuite récupérer ces données à chaque modification d'une propriété, par exemple la page en cours de la pagination. Certains ont tendance à l'écrire comme ceci :

<script>
export default (
  name: 'SomeComponent',
  watch: (
    someWatchedProperty() (
      this.fetchData();
    )
  ),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

Bien sûr, cela fonctionne, mais... Ce n'est pas la meilleure approche, ni même une bonne. Alors, voyons comment nous pouvons refactoriser cela, un exemple d'une approche pas si mauvaise :

<script>
export default (
name: 'SomeComponent',
watch: (
  someWatchedProperty: 'fetchData'
),
  created() (
    this.fetchData();
  ),
  methods: (
    fetchData() (
      // handle fetch data
    )
  )
);
</script>

La version ci-dessus est meilleure parce qu'une autre méthode n'est pas nécessaire, nous avons seulement nommé une méthode qui doit être appelée pour modifier watchProperty.

Une meilleure approche encore :

<script>
  export default (
    name: 'SomeComponent',
    watch: (
      someWatchedProperty: (
        handler: 'fetchData',
        immediate: true
      )
    ),
    methods: (
      fetchData() (
        // handle fetch data
      )
    )
  );
</script>

Nous nous sommes débarrassés du crochet de création. En ajoutant l'option "immediate", nous faisons en sorte que ce composant appelle la méthode fetchData immédiatement après le début de l'observation (un peu avant le crochet created et après beforeCreated), de sorte qu'il peut être utilisé à la place du crochet created.

Résumé des conseils de Vue.js

Ces conseils ne rendront pas votre candidature parfaite, mais leur mise en œuvre permettra d'accélérer le processus. améliorer la qualité de votre code. J'espère également que vous trouverez quelque chose d'intéressant dans les exemples ci-dessus.

Notez que certaines d'entre elles ont été simplifiées pour les besoins de l'article.

En savoir plus :

JavaScript est totalement mort. Un type sur Internet

Un regard plus approfondi sur les crochets React les plus populaires

Projets logiciels pour lesquels vous pouvez utiliser JavaScript