Que est-ce que la Composition API dans Vue.js ? Une introduc

Introduction

La Composition API est une caractéristique clé introduite dans Vue.js 3. Elle permet d’organiser et de réutiliser le code logiciel des composants en exposant les capacités de Vue comme des fonctions standalone. Dans cet article, nous explorerons comment utiliser la Composition API pour simplifier la création de composants réutilisables.

Pourquoi la Composition API ?

La composition API est conçue pour résoudre un problème courant dans la programmation orientée objet : la définition d’un comportement complexe à l’intérieur d’une option spécifique. Cela rend les composants difficiles à lire et à comprendre, et rend difficile l’extraction et la réutilisation de logique commune entre les composants.

La setup() fonction

La Composition API expose Vue’s core capabilities comme des fonctions standalone. Nous utilisons ces fonctions dans la setup() option d’un composant.

export default {
  name: "MyComponent",
  setup() {
    // Code à exécuter avant la création du composant
  },
};

La setup() fonction prend deux arguments :

• props: les données passées par le composant parent.
• context: un objet exposant trois propriétés de composant : attributs, slots et événements.

export default {
  name: "MyComponent",
  setup(props, context) {
    // Code à exécuter avant la création du composant
  },
};

Accès aux props et au contexte

Nous pouvons accéder aux props et au context dans la setup() fonction.

export default {
  name: "MyComponent",
  setup(props, context) {
    console.log(props); // Affiche les données passées par le composant parent
    console.log(context); // Affiche les propriétés de composant
  },
};

Retour d’une objet

La setup() fonction retourne un objet qui peut être utilisé dans le template du composant.

export default {
  name: "MyComponent",
  setup() {
    return {
      getGreeting: "Hello World!",
    };
  },
};

ref() fonction

Pour gérer les valeurs primitives de manière réactive, nous utilisons la ref() fonction. Cela permet d’accéder à la valeur de la référence dans le template.

import { ref } from "vue";

export default {
  name: "MyComponent",
  setup() {
    const getGreeting = ref("Hello World!");
    return {
      getGreeting,
    };
  },
};

Nous pouvons également accéder à la valeur de la référence dans la setup() fonction en utilisant le .value propriété.

import { ref } from "vue";

export default {
  name: "MyComponent",
  setup() {
    const getGreeting = ref("Hello World!");
    console.log(getGreeting.value); // Affiche la valeur de la référence
    return {
      getGreeting,
    };
  },
};

reactive() fonction

Pour gérer les objets de manière réactive, nous utilisons la reactive() fonction. Cela permet d’accéder directement aux propriétés de l’objet dans le template.

import { reactive } from "vue";

export default {
  name: "MyComponent",
  setup() {
    const greeting = reactive({
      message: "Hello World!",
      description: "Welcome to the app!",
    });
    return {
      greeting,
    };
  },
};

Nous pouvons également mettre à jour les propriétés de l’objet dans la setup() fonction sans utiliser le .value propriété.

import { reactive } from "vue";

export default {
  name: "MyComponent",
  setup() {
    const greeting = reactive({
      message: "Hello World!",
      description: "Welcome to the app!",
    });
    const updateGreeting = () => {
      greeting.message = "Hello Hello!";
      greeting.description = "Welcome Welcome!";
    };
    return {
      greeting,
      updateGreeting,
    };
  },
};

Conclusion

La Composition API est une caractéristique puissante qui permet de simplifier la création de composants réutilisables dans Vue.js. En utilisant les fonctions setup(), ref() et reactive(), nous pouvons organiser le code logiciel de manière plus efficace et réactive.

Étapes suivantes

• Explorer d’autres fonctionnalités de la Composition API, telles que l’utilisation des hooks.
• Appliquer les connaissances acquises pour créer des composants réutilisables dans vos applications Vue.js.
• Réfléchir à comment intégrer la Composition API dans votre processus de développement pour améliorer l’efficacité et la productivité.