Quelques conseils d'optimisation du code Vue

Vue est un framework JavaScript populaire qui permet de créer rapidement des applications Web basées sur les données. Cependant, à mesure que les projets Vue deviennent de plus en plus complexes, l'optimisation du code devient particulièrement importante. Si vous n'optimisez pas votre code, les performances de votre application peuvent être lentes et votre code plus difficile à maintenir. Cet article présentera quelques techniques d'optimisation du code Vue.

1. Évitez d'utiliser des calculs complexes dans les modèles

Vue fournit la fonction de propriétés calculées. Les propriétés calculées convertissent la valeur d'un objet réactif en une propriété calculée pouvant être utilisée pour le rendu. Cela rend l'utilisation des propriétés calculées plus efficace que l'utilisation de calculs complexes directement dans le modèle. Si les données dont dépend l'attribut calculé ne changent pas, la valeur calculée ne sera calculée qu'une seule fois lorsqu'elle est utilisée plusieurs fois dans le modèle.

Supposons qu'il y ait un morceau de code dans le modèle :

<div>{{ items.filter(item => item.price > 10).map(item => item.name) }}</div>

Ce code calculera le tableau d'éléments à chaque fois qu'il sera restitué, donc si le tableau d'éléments est grand, cela entraînera des problèmes de performances. Au lieu de cela, vous pouvez utiliser les propriétés calculées pour calculer les résultats, qui sont recalculés uniquement lorsque les dépendances changent :

computed: {
  filteredItems() {
    return this.items.filter(item => item.price > 10)
  },
  itemNames() {
    return this.filteredItems.map(item => item.name)
  }
}

Le code du modèle correspondant deviendra :

<div>{{ itemNames }}</div>

Cette approche peut améliorer considérablement les performances de votre application.

2. Évitez d'utiliser v-if et v-for imbriqués dans les modèles

Dans les modèles, v-if et v-for sont deux directives très puissantes. Cependant, lorsque ces deux instructions sont imbriquées, elles deviennent très lentes. Par exemple :

<div v-for="user in users" v-if="user.isActive">{{ user.name }}</div>

Ce code utilise v-for pour parcourir le tableau des utilisateurs, puis utilise v-if pour filtrer les éléments dont isActive est vrai. Ce processus est très inefficace. Vue calcule la liste entière plusieurs fois et recrée les éléments DOM à chaque fois.

Afin d'améliorer les performances, vous pouvez remplacer v-if et v-for par des attributs calculés :

computed: {
  activeUsers() {
    return this.users.filter(user => user.isActive)
  }
}

Utilisez ensuite v-for dans le modèle pour parcourir les utilisateurs actifs :

<div v-for="user in activeUsers">{{ user.name }}</div>

3. Réduisez le nombre d'observateurs

watcher fournit un mécanisme de mise à jour réactif des données Vue, lorsqu'un certain attribut change, l'observateur mettra automatiquement à jour la vue associée. Cependant, s’il y a trop d’observateurs, cela peut entraîner des problèmes de performances. Généralement, le nombre d'observateurs est proportionnel au nombre de propriétés de l'instance Vue.

Afin de réduire le nombre d'observateurs, vous pouvez utiliser l'attribut calculé à la place des observateurs. Les propriétés calculées ne sont recalculées que lorsque les dépendances changent, alors que les observateurs sont toujours appelés à chaque changement de propriété. Si vous n'avez pas besoin de mettre à jour la vue à chaque fois qu'une propriété change, les propriétés calculées constituent un meilleur choix.

4. Optimiser le rendu de liste

Dans Vue, le rendu de liste est une tâche très courante. Pour optimiser le rendu de la liste, vous pouvez utiliser l'attribut key. L'attribut clé est un identifiant qui distingue chaque élément de la liste. Il permet à Vue de détecter plus rapidement les modifications dans les éléments DOM et de restaurer l'état plus rapidement lors du rendu répété du même élément de liste.

Cependant, veillez à ne pas utiliser de clés dynamiques dans les grandes listes. L'utilisation de clés dynamiques amènera Vue à restituer la liste entière, ce qui sera très gourmand en performances. Utilisez plutôt la clé, mais assurez-vous qu’elle est statique et unique dans la liste.

5. Utiliser des composants asynchrones

Vue fournit une fonctionnalité de composant asynchrone, qui nous permet de retarder le chargement des composants, améliorant ainsi la vitesse d'initialisation de l'application. Si nous avons un composant ou une page volumineux, nous pouvons l'optimiser de cette manière pour accélérer le chargement de la première page de la page. L'utilisation de la fonctionnalité de composant asynchrone de Vue nécessite l'utilisation d'outils de packaging similaires tels que Webpack.

6. Tests de performances avec Vue Devtools

Vue Devtools est une extension de navigateur pour le débogage des applications Vue. Il fournit non seulement la hiérarchie et l'état des composants Vue, mais vous permet également de vérifier les performances de votre application. Grâce à l'analyse des performances de Devtools, vous pouvez examiner rigoureusement les problèmes de performances et suivre les performances réelles pour identifier les chemins de code les plus lents et ce qui peut en être la cause. C'est un excellent outil pour optimiser les performances des applications Vue.

Résumé :

Voici quelques conseils pour optimiser les performances des applications Vue. Les performances de votre application Vue peuvent être considérablement améliorées en évitant les calculs complexes dans les modèles, en optimisant le rendu des listes, les composants asynchrones qui affectent le premier temps d'écran, etc. Enfin, l'utilisation de Vue Devtools est un excellent moyen de détecter et de résoudre les problèmes de performances des applications.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!