Migrer de Vue 2 vers Vue 3

Pourquoi Migrer de Vue 2 vers Vue 3 ?

Dans un monde où les technologies évoluent constamment, il est crucial pour les développeurs de rester à jour et d'adapter leurs compétences aux dernières tendances du marché. Vue.js, une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur web réactives, n'est pas une exception. Vue 3 est la version la plus récente de cette bibliothèque et apporte de nombreux améliorations significatives par rapport à Vue 2.

En particulier, Vue 3 offre des performances accrues, une meilleure gestion du rendu virtuel, et une structure modulaire plus efficace. Ces avantages peuvent entraîner une application web plus rapide, moins gourmande en ressources et plus facile à maintenir. Ainsi, migrer de Vue 2 vers Vue 3 peut non seulement améliorer la performance de votre application mais aussi son architecture globale.

Un cas d'usage concret serait l'évolution d'une application web existante qui nécessite une redécouverte technique pour rester compétitive sur le marché. Une migration vers Vue 3 pourrait permettre à cette application d'avoir des performances plus optimisées, une meilleure scalabilité et une facilité accrue de la maintenance.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Connaissance avancée de JavaScript
• Familiarité avec Vue.js 2
• Un environnement de développement local configuré (Node.js et npm recommandés)
• Visual Studio Code ou un autre éditeur de code moderne

Concepts fondamentaux

Composition API

Vue 3 introduit la Composition API, une nouvelle façon d'organiser le code dans les composants Vue. Cette API permet de séparer le code en fonctions logiques plutôt que par structure (comme dans le système Options API). Cela rend le code plus réutilisable et plus facile à comprendre.

<template>
  <div>
    <h1>message</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    const increment = () => {
      console.log(message.value);
    };

    return {
      message,
      increment
    };
  }
};
</script>

Teleport

Teleport est une nouvelle fonctionnalité de Vue 3 qui permet aux composants de s'afficher n'importe où dans le DOM, même en dehors du hiérarchie parent-enfant.

<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <teleport to="body">
      <div v-if="isOpen" class="modal">
        <p>This is a modal</p>
        <button @click="closeModal">Close</button>
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isOpen = ref(false);

    const openModal = () => {
      isOpen.value = true;
    };

    const closeModal = () => {
      isOpen.value = false;
    };

    return {
      isOpen,
      openModal,
      closeModal
    };
  }
};
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
}
</style>

Suspense

Suspense est une fonctionnalité de Vue 3 qui permet de gérer les états asynchrones dans les composants. Il permet d'afficher un contenu d'attente ou une erreur pendant que les données sont en cours de chargement.

<template>
  <div>
    <suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <p>Loading...</p>
      </template>
    </suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

export default {
  components: {
    AsyncComponent
  }
};
</script>

Fragments

Vue 3 permet désormais de retourner plusieurs nœuds à partir d'un composant, ce qui simplifie la structure des composants et rend le code plus lisible.

<template>
  <header>
    <h1>Header</h1>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>Footer</p>
  </footer>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

Mise en pratique : projet fil rouge

Pour mettre en pratique ce que nous avons appris, allons-y avec un petit projet concrêt. Nous allons créer une application de gestionnaire de tâches simple qui permet d'ajouter, de supprimer et de marquer comme terminée des tâches.

Étape 1 : Configuration du projet

Démarrons par la création d'un nouveau projet Vue 3 :

npm init vue@latest

Suivez les instructions pour créer votre projet. Une fois le projet créé, naviguez dans le répertoire du projet et installez les dépendances nécessaires :

cd my-vue3-app
npm install

Étape 2 : Création d'un composant Tâche

Créons un composant Task.vue qui représente une tâche individuelle.

<template>
  <div class="task" :class="{ completed: task.completed }">
    <p>task.text</p>
    <button @click="toggleCompletion">Toggle Completion</button>
    <button @click="deleteTask">Delete</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  props: {
    task: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const toggleCompletion = () => {
      props.task.completed = !props.task.completed;
    };

    const deleteTask = () => {
      // Logique de suppression
      console.log('Delete task', props.task);
    };

    return {
      toggleCompletion,
      deleteTask
    };
  }
};
</script>

<style>
.task {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.completed {
  text-decoration: line-through;
}
</style>

Étape 3 : Création du composant Gestionnaire de Tâches

Créons un composant TaskManager.vue qui gère la liste des tâches.

<template>
  <div class="task-manager">
    <h1>Task Manager</h1>
    <input v-model="newTaskText" placeholder="Add new task" />
    <button @click="addTask">Add Task</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        <Task :task="task" @delete-task="tasks.splice(index, 1)" />
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';
import Task from './Task.vue';

export default {
  components: {
    Task
  },
  setup() {
    const newTaskText = ref('');
    const tasks = ref([]);

    const addTask = () => {
      if (newTaskText.value.trim()) {
        tasks.value.push({ text: newTaskText.value, completed: false });
        newTaskText.value = '';
      }
    };

    return {
      newTaskText,
      tasks,
      addTask
    };
  }
};
</script>

<style>
.task-manager {
  max-width: 600px;
  margin: 0 auto;
}
</style>

Étape 4 : Intégration du composant Gestionnaire de Tâches

Intégrez le composant TaskManager.vue dans le fichier App.vue.

<template>
  <div id="app">
    <TaskManager />
  </div>
</template>

<script>
import TaskManager from './components/TaskManager.vue';

export default {
  name: 'App',
  components: {
    TaskManager
  }
};
</script>

Étape 5 : Lancement du projet

Enfin, lancez votre application pour voir le résultat :

npm run serve

Votre gestionnaire de tâches simple devrait maintenant être en cours d'exécution.

Erreurs frequentes et debugging

Voici quelques erreurs courantes lors de la migration de Vue 2 vers Vue 3, ainsi que leurs corrections.

Erreur 1 : v-model syntaxe changeée

Vue 3 a changé la syntaxe de v-model. Il est maintenant préférable d'utiliser des prop et des événements explicites pour gérer les entrées utilisateur.

## ❌ Mauvais
<template>
  <input v-model="message" />
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>
vue3
## ✅ Correct
<template>
  <input :value="message" @input="updateMessage" />
</template>

<script>
export default {
  props: {
    message: String
  },
  emits: ['update:message'],
  setup(props, { emit }) {
    const updateMessage = (event) => {
      emit('update:message', event.target.value);
    };

    return {
      updateMessage
    };
  }
};
</script>

Erreur 2 : this change dans les composants fonctionnels

Dans Vue 3, la syntaxe des composants fonctionnels a changé. Il est maintenant nécessaire d'utiliser le contexte de rendu (renderContext) pour accéder aux propriétés et méthodes.

## ❌ Mauvais
const MyComponent = (props, context) => {
  return h('div', props.text);
};
vue3
## ✅ Correct
import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  props: ['text'],
  render() {
    return this.$createElement('div', this.text);
  }
});

Erreur 3 : Vue.observable a été remplacé par ref

Vue 2 utilisait Vue.observable pour créer des objets réactifs. Vue 3 introduit maintenant ref, qui est plus flexible et permet de gérer les types de données plus complexes.

## ❌ Mauvais
import Vue from 'vue';

const state = Vue.observable({
  count: 0
});
vue3
## ✅ Correct
import { ref } from 'vue';

const state = ref({
  count: 0
});

Pour aller plus loin

Voici quelques pistes pour approfondir votre apprentissage de Vue 3 :

1. Composition API: Continuez à explorer les différentes fonctions et hooks disponibles dans la Composition API pour créer des composants plus réutilisables et modulaires.
2. Teleport: Apprenez comment utiliser Teleport pour afficher du contenu n'importe où dans le DOM, même en dehors de la hiérarchie parent-enfant.
3. Suspense: Familiarisez-vous avec Suspense pour gérer les états asynchrones dans vos composants et améliorer l'expérience utilisateur.

Défi pratique

En tant que défi pratique, essayez d'implémenter une petite fonctionnalité supplémentaire dans votre application de gestionnaire de tâches. Par exemple :

• Ajoutez la possibilité de filtrer les tâches par statut (toutes, incomplètes, complètes).
• Implémentez la persistance des données en utilisant le stockage local du navigateur.

Cela vous permettra d'appliquer ce que vous avez appris et de développer votre compréhension de Vue 3.