Optimiser les performances Vue

Pourquoi Optimiser les performances Vue ?

Optimiser les performances Vue est essentiel pour les développeurs web modernes car ils influencent grandement l'expérience utilisateur de votre application. Dans un contexte réel, imaginez une application avec une interface complexe et beaucoup d'interactions : chaque milliseconde supplémentaire peut faire la différence entre un utilisateur satisfait et un utilisateur frustré.

Un cas d'utilisation concret est l'affichage de listes volumineuses ou complexes. Si les performances ne sont pas optimisées, votre application risque de ralentir ou même de planter lorsque vous essayez de naviguer dans ces grandes quantités de données.

Prerequis

• Connaissance avancée de Vue.js
• Familiarité avec les concepts de composants et de props
• Maîtrise des directives v-if, v-for, v-bind, etc.
• Compréhension des options du lifecycle d'un composant
• Connaissance des hooks created, mounted, updated, etc.

Outils à installer :

• Node.js (v14.0+)
• npm (v6.0+)

Concepts fondamentaux

1. Utilisation de v-once

v-once permet de rendre une partie du template statique, évitant ainsi le re-réndering à chaque mise à jour.

<template>
  <div v-once>
    Ce contenu n'est pas mis à jour.
  </div>
</template>

2. Utilisation de key pour forcer la réconciliation

En changeant la valeur de la propriété key, Vue re-réconcilie le rendu du composant.

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  }
};
</script>

3. Utilisation de v-cloak pour gérer les débordements

v-cloak permet d'éviter les affichages temporaires des bindings avant que Vue ne soit prêt.

<template v-cloak>
  message
</template>

<style>
[v-cloak] {
  display: none;
}
</style>

4. Utilisation de keep-alive

keep-alive permet de mettre en cache les composants, évitant ainsi leur destruction et reconstruction.

<template>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>

Mise en pratique : projet fil rouge

Mini-projet : Gestionnaire de tâches

Étape 1 : Initialisation du projet

Créer un nouveau projet Vue avec Vue CLI.

npm install -g @vue/cli
vue create task-manager
cd task-manager

Étape 2 : Création des composants

Créez les composants TaskList.vue, TaskItem.vue et AddTask.vue.

TaskList.vue

<template>
  <div>
    <h1>Tâches</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <TaskItem :task="task" @remove="removeTask(task)" />
      </li>
    </ul>
    <AddTask @add="addTask" />
  </div>
</template>

<script>
import TaskItem from './TaskItem.vue';
import AddTask from './AddTask.vue';

export default {
  components: {
    TaskItem,
    AddTask
  },
  data() {
    return {
      tasks: [
        { id: 1, name: 'Tâche 1' },
        { id: 2, name: 'Tâche 2' }
      ]
    };
  },
  methods: {
    addTask(task) {
      this.tasks.push({ ...task, id: Date.now() });
    },
    removeTask(task) {
      this.tasks = this.tasks.filter(t => t.id !== task.id);
    }
  }
};
</script>

TaskItem.vue

<template>
  <div>
    task.name
    <button @click="$emit('remove', task)">Supprimer</button>
  </div>
</template>

<script>
export default {
  props: {
    task: {
      type: Object,
      required: true
    }
  }
};
</script>

AddTask.vue

<template>
  <form @submit.prevent="addTask">
    <input v-model="newTask" placeholder="Nouvelle tâche" />
    <button type="submit">Ajouter</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.$emit('add', { name: this.newTask });
        this.newTask = '';
      }
    }
  }
};
</script>

Étape 3 : Structure des fichiers

Organisez les fichiers dans le répertoire src/components.

Erreurs frequentes et debugging

Erreur 1 : Référencement à une donnée non définie

## ❌ Mauvais
<div>nonExistant</div>

## ✅ Correct
<div v-if="nonExistant !== undefined">nonExistant</div>

Erreur 2 : Méthode non déclarée

## ❌ Mauvais
<button @click="removeTask">Supprimer</button>

## ✅ Correct
<button @click="$emit('remove')">Supprimer</button>

Erreur 3 : Prop non passée correctement

## ❌ Mauvais
<TaskItem :task />

## ✅ Correct
<TaskItem :task="task" />

Pour aller plus loin

1. Vue Performance Benchmarks - Explorez les différents benchmarks pour comparer la performance de différentes configurations Vue.
2. Vue Devtools Profiler - Utilisez le profiler de Vue Devtools pour analyser et optimiser votre application.
3. Code Splitting avec Webpack - Découvrez comment utiliser Webpack pour diviser votre code en morceaux plus petits.

Défi pratique : Optimiser un composant complexe dans une application existante en utilisant les techniques d'optimisation Vue que nous avons étudiées.