Nouveau : Datasets open source gratuits disponibles !Decouvrir →
sharing-data.fr sharing-data.fr
💚
Web 12 min • intermediaire

Les erreurs a eviter en Vue

Sommaire

Erreur N 1 : Le manque d'optimisation des rendus conditionnels

Le problème

L'utilisation inappropriée de rendus conditionnels peut entraîner une performance dégradée, surtout lorsqu'un élément est conditionnellement rendu à chaque itération d'une liste ou d'un composant.

Code d'exemple :

<template>
  <div v-if="showElement">
    <!-- Contenu de l'élément -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showElement: true
    };
  }
};
</script>

Pourquoi c'est une erreur

Le rendu conditionnel v-if entraîne le re-création de l'élément à chaque itération, même si son contenu n'a pas changé. Cela peut être particulièrement problématique pour des éléments complexes ou des composants réutilisables qui ont un coût élevé en termes de performance.

La solution

Utilisez v-show pour les éléments qui doivent être souvent affichés et cachés, car il n'y a pas de re-création. Cependant, assurez-vous que l'élément est réellement visible dans le DOM.

Code corrige :

<template>
  <div v-show="showElement">
    <!-- Contenu de l'élément -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      showElement: true
    };
  }
};
</script>

Comment prévenir

  • Utilisez v-show plutôt que v-if pour des éléments qui doivent être souvent affichés et cachés.
  • Évaluez régulièrement les performances de vos rendus conditionnels et remplacez v-if par v-show quand approprié.

Erreur N 2 : L'utilisation excessive de computed properties

Le problème

L'utilisation d'une quantité excessive de computed properties peut entraîner une performance dégradée. Ces propriétés sont recalculées à chaque itération du rendu, même si leur valeur n'a pas changé.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    calculateValue(item)
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  computed: {
    calculateValue(item) {
      // Calcul coûteux
      return item.value * 10;
    }
  }
};
</script>

Pourquoi c'est une erreur

Les computed properties sont recalculées à chaque itération du rendu, même si leur valeur n'a pas changé. Cela peut entraîner une performance dégradée, surtout lorsque le nombre d'éléments est important.

La solution

Utilisez des methods pour les calculs coûteux qui ne doivent être recalculés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    calculateValue(item)
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  methods: {
    calculateValue(item) {
      // Calcul coûteux
      return item.value * 10;
    }
  }
};
</script>

Comment prévenir

  • Évitez l'utilisation excessive de computed properties.
  • Utilisez des methods pour les calculs coûteux qui ne doivent être recalculés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 3 : L'usage de méthodes dans les templates

Le problème

L'utilisation de méthodes directement dans les templates peut entraîner une performance dégradée, car elles sont exécutées à chaque itération du rendu.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    item.value | formatValue
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  filters: {
    formatValue(value) {
      // Formatage coûteux
      return value * 10;
    }
  }
};
</script>

Pourquoi c'est une erreur

Les méthodes directement utilisées dans les templates sont exécutées à chaque itération du rendu, même si leur valeur n'a pas changé. Cela peut entraîner une performance dégradée, surtout lorsque le nombre d'éléments est important.

La solution

Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    item.formattedValue
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  computed: {
    formattedValue(item) {
      // Formatage coûteux
      return item.value * 10;
    }
  }
};
</script>

Comment prévenir

  • Évitez l'utilisation excessive de méthodes dans les templates.
  • Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 4 : L'usage incorrect de v-for et v-if

Le problème

L'utilisation incorrecte de v-for et v-if peut entraîner une performance dégradée, car les deux directives sont exécutées sur chaque élément du rendu.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    <div v-if="item.visible">
      item.value
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2, visible: true },
        { id: 2, value: 3, visible: false }
      ]
    };
  }
};
</script>

Pourquoi c'est une erreur

Les deux directives sont exécutées sur chaque élément du rendu, ce qui peut entraîner une performance dégradée. En particulier, v-if est exécuté avant v-for, ce qui peut entraîner des itérations inutiles.

La solution

Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    <div v-if="item.visible">
      item.value
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2, visible: true },
        { id: 2, value: 3, visible: false }
      ]
    };
  }
};
</script>

Comment prévenir

  • Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.
  • Évitez l'utilisation incorrecte de v-for et v-if.

Erreur N 5 : L'usage d'une quantité excessive de watchers

Le problème

L'utilisation d'une quantité excessive de watchers peut entraîner une performance dégradée. Ces observateurs sont appelés à chaque changement dans les données, même si leur valeur n'a pas changé.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    item.value
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  watch: {
    items: {
      handler(newItems) {
        // Traitement coûteux
        newItems.forEach(item => item.value *= 10);
      },
      deep: true
    }
  }
};
</script>

Pourquoi c'est une erreur

Les watchers sont appelés à chaque changement dans les données, même si leur valeur n'a pas changé. Cela peut entraîner une performance dégradée, surtout lorsque le nombre de données est important.

La solution

Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    item.formattedValue
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 2 },
        { id: 2, value: 3 }
      ]
    };
  },
  computed: {
    formattedValue(item) {
      // Formatage coûteux
      return item.value * 10;
    }
  }
};
</script>

Comment prévenir

  • Évitez l'utilisation excessive de watchers.
  • Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 6 : L'usage incorrect d'une quantité excessive de directives

Le problème

L'usage incorrect d'une quantité excessive de directives peut entraîner une performance dégradée. Les directives comme v-bind, v-on, v-model et autres peuvent être coûteuses en termes de rendu.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="item.value" @input="handleInput(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: '' },
        { id: 2, value: '' }
      ]
    };
  },
  methods: {
    handleInput(item) {
      // Traitement coûteux
      item.value = item.value.toUpperCase();
    }
  }
};
</script>

Pourquoi c'est une erreur

Les directives comme v-model et @input sont coûteuses en termes de rendu, surtout lorsque le nombre d'éléments est important.

La solution

Utilisez des methods pour les traitements coûteux qui ne doivent être exécutés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="item.value" @input="handleInput(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: '' },
        { id: 2, value: '' }
      ]
    };
  },
  methods: {
    handleInput(item) {
      // Traitement coûteux
      item.value = item.value.toUpperCase();
    }
  }
};
</script>

Comment prévenir

  • Évitez l'usage incorrect d'une quantité excessive de directives.
  • Utilisez des methods pour les traitements coûteux qui ne doivent être exécutés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 7 : L'utilisation inappropriée de v-on:click

Le problème

L'utilisation inappropriée de v-on:click peut entraîner une performance dégradée, surtout lorsque le nombre d'éléments est important. Les événements click sont exécutés à chaque clic sur l'élément.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    <button v-on:click="handleClick(item)">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 }
      ]
    };
  },
  methods: {
    handleClick(item) {
      // Traitement coûteux
      item.id += 1;
    }
  }
};
</script>

Pourquoi c'est une erreur

Les événements click sont exécutés à chaque clic sur l'élément, ce qui peut entraîner une performance dégradée. En particulier, v-on:click est exécuté avant v-for, ce qui peut entraîner des itérations inutiles.

La solution

Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    <button @click="handleClick(item)">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 }
      ]
    };
  },
  methods: {
    handleClick(item) {
      // Traitement coûteux
      item.id += 1;
    }
  }
};
</script>

Comment prévenir

  • Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.
  • Évitez l'utilisation incorrecte de v-on:click.

Erreur N 8 : L'usage d'une quantité excessive de composants récursifs

Le problème

L'usage d'une quantité excessive de composants récursifs peut entraîner une performance dégradée. Les composants récursifs sont appelés à chaque itération du rendu, même si leur valeur n'a pas changé.

Code d'exemple :

<template>
  <div v-if="hasChildren">
    <recursive-component :children="children"></recursive-component>
  </div>
</template>

<script>
export default {
  props: {
    children: Array,
    hasChildren: Boolean
  }
};
</script>

Pourquoi c'est une erreur

Les composants récursifs sont appelés à chaque itération du rendu, même si leur valeur n'a pas changé. Cela peut entraîner une performance dégradée, surtout lorsque le nombre de données est important.

La solution

Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-if="hasChildren">
    <recursive-component :children="children"></recursive-component>
  </div>
</template>

<script>
export default {
  props: {
    children: Array,
    hasChildren: Boolean
  }
};
</script>

Comment prévenir

  • Évitez l'utilisation excessive de composants récursifs.
  • Utilisez des computed properties pour les transformations de données qui doivent être recalculées uniquement lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 9 : L'usage incorrect d'une quantité excessive de directives

Le problème

L'usage incorrect d'une quantité excessive de directives peut entraîner une performance dégradée. Les directives comme v-bind, v-on, v-model et autres peuvent être coûteuses en termes de rendu.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="item.value" @input="handleInput(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: '' },
        { id: 2, value: '' }
      ]
    };
  },
  methods: {
    handleInput(item) {
      // Traitement coûteux
      item.value = item.value.toUpperCase();
    }
  }
};
</script>

Pourquoi c'est une erreur

Les directives comme v-model et @input sont coûteuses en termes de rendu, surtout lorsque le nombre d'éléments est important.

La solution

Utilisez des methods pour les traitements coûteux qui ne doivent être exécutés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    <input v-model="item.value" @input="handleInput(item)">
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: '' },
        { id: 2, value: '' }
      ]
    };
  },
  methods: {
    handleInput(item) {
      // Traitement coûteux
      item.value = item.value.toUpperCase();
    }
  }
};
</script>

Comment prévenir

  • Évitez l'usage incorrect d'une quantité excessive de directives.
  • Utilisez des methods pour les traitements coûteux qui ne doivent être exécutés que lorsqu'un ou plusieurs de leurs dépendances ont changé.

Erreur N 10 : L'usage inappropriée de v-on:click

Le problème

L'utilisation inappropriée de v-on:click peut entraîner une performance dégradée, surtout lorsque le nombre d'éléments est important. Les événements click sont exécutés à chaque clic sur l'élément.

Code d'exemple :

<template>
  <div v-for="item in items" :key="item.id">
    <button v-on:click="handleClick(item)">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 }
      ]
    };
  },
  methods: {
    handleClick(item) {
      // Traitement coûteux
      item.id += 1;
    }
  }
};
</script>

Pourquoi c'est une erreur

Les événements click sont exécutés à chaque clic sur l'élément, ce qui peut entraîner une performance dégradée. En particulier, v-on:click est exécuté avant v-for, ce qui peut entraîner des itérations inutiles.

La solution

Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.

Code corrige :

<template>
  <div v-for="item in items" :key="item.id">
    <button @click="handleClick(item)">
      Click me
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1 },
        { id: 2 }
      ]
    };
  },
  methods: {
    handleClick(item) {
      // Traitement coûteux
      item.id += 1;
    }
  }
};
</script>

Comment prévenir

  • Utilisez un seul boucle avec une condition imbriquée pour éviter les itérations inutiles.
  • Évitez l'utilisation incorrecte de v-on:click.

Un projet tech a lancer ?

Besoin d'un accompagnement ? Decrivez votre projet pour des recommandations.

Recevoir des conseils

Questions frequentes

Quelles erreurs courantes existent-t-il en Vue.js ?
Il existe plusieurs erreurs courantes en Vue.js, telles que l'oubli de la syntaxe correcte des directives v-bind et v-on, les erreurs liées aux bindings dynamiques incorrects, et les problèmes d'optimisation liés à l'utilisation excessive de watchers.
Comment éviter les performances médiocres en Vue.js?
Pour éviter des performances médiocres en Vue.js, il est important de minimiser la réactivité inutile, d'optimiser les templates et de limiter l'utilisation du v-for. Il peut également être utile d'utiliser des outils comme Vue Devtools pour identifier les problèmes potentiels.
Quelle est la différence entre v-if et v-show en Vue.js?
v-if est utilisé pour conditionnellement afficher ou cacher un élément du DOM. Il élimine l'élément complètement si la condition est fausse, ce qui peut entraîner une meilleure performance. En revanche, v-show contrôle simplement le CSS display de l'élément et conserve toujours les éléments dans le DOM.

Pages liees

GuidesTous les guidesTutorielsTutorielsMetiersMetiers tech

Chaque semaine, le meilleur de la tech francaise

Tendances, salaires, outils et opportunites — directement dans votre boite mail.

Gratuit. Desabonnement en un clic. Pas de spam.