Ne plus utiliser l'API Options dans Vue

Vue 3 a introduit une nouvelle approche de la création de composants appelée Composition API. Il s'agit d'une alternative à la Options API. L'API de composition est entièrement facultative et vous n'avez pas besoin de l'utiliser si vous voulez utiliser Vue 3. Cependant, il apporte quelques améliorations importantes qui facilitent votre travail et améliorent la lisibilité de l'interface utilisateur. code.

Avantages de l'API de composition par rapport à l'API d'options

1. Meilleure organisation et lisibilité du code.

L'API Composition introduit une nouvelle méthode appelée configuration. A l'intérieur, vous pouvez créer tous les éléments nécessaires au composant, tels que : données, méthodes, propriétés calculées, observateurs. Grâce à cela, vous pouvez garder le code propre en plaçant la logique responsable d'une fonctionnalité donnée en un seul endroit. En revanche, l'API Options obligeait à disperser la logique dans tout le fichier. En conséquence, le code n'était pas lisible et il fallait le faire défiler. Dans l'API Composition, les méthodes, les observateurs, etc. n'ont plus besoin d'être regroupés par type, vous pouvez les placer comme bon vous semble.

2. Extraction et réutilisation de la logique.

L'API de composition vous permet d'écrire du code réactif n'importe où. Vous pouvez tirer une partie de la logique réactive en dehors du composant. Ce type de code est appelé Composables. Les composables peuvent être importés dans de nombreux composants et permettent d'encapsuler une certaine logique et d'exposer les éléments réactifs nécessaires.

// shopping-list.js
import ( computed ) from "vue" ;

export function useShoppingList(listId) (
  const products = shoppingList.getAllProducts(listId) ;
  const productsCount = computed(() => products.value.length) ;
  const deleteProduct = (productId) => shoppingList.deleteProduct(productId) ;

  return (
    produits,
    productsCount,
    deleteProduct,
  ) ;
)

// Composant
import useSpoppingList de "@/composables/shopping-list.js" ;
export default (
  setup() (
    const ( products, productsCount, deleteProduct ) = useSpoppingList() ;
    return ( produits, produitsCount, deleteProduct ) ;
  ),
) ;

3. Utiliser facilement des constantes et des ressources externes dans les composants.

Dans l'API Options, pour ajouter par exemple une liste statique d'éléments importés d'un autre fichier, vous devez l'ajouter à data() (ce qui a un impact négatif sur les performances) ou l'ajouter à cette en créé(). Ces deux méthodes ne sont pas très élégantes. L'API de composition et le nouveau configuration qui vous permet d'exporter non seulement des éléments réactifs, mais aussi des constantes et des dépendances externes.

import list from "./list.json" ;
export default (
  setup() (
    return ( liste ) ;
  ),
) ;

4. Vous pouvez même utiliser l'API de composition dans Vue 2.

Grâce au site officiel de l @vue/composition-api vous pouvez utiliser l'API de composition dans Vue 2 également.

Comment utiliser la nouvelle API de composition ?

<h3>Méthode de configuration</h3>

setup() est une nouvelle méthode ajoutée dans Vue 3 où vous pouvez placer tous les éléments nécessaires tels que les objets de données, les méthodes, etc. À partir de là, vous pouvez renvoyer les éléments que vous souhaitez inclure dans le modèle.

<template>
  <div>(( compte ))</div>
</template>

import ( ref ) de "vue" ;
export default (
  setup() (
    const count = ref(10) ;
    return ( count ) ;
  ),
) ;

réactif()

Pour créer un objet ou un tableau réactif, vous devez le créer à l'aide de la fonction reactive(defaultValue) méthode. Vous pouvez transmettre la valeur initiale de cet objet en tant qu'argument de la méthode. La méthode renvoie un mandataire pour cet objet, de sorte que lorsque vous y apportez des modifications, Vue les connaît et peut rafraîchir la vue comme il se doit.

Composition API

import ( reactive ) de "vue" ;
export default (
  setup() (
    const user = reactive((
      nom : "John",
      role : "ADMIN",
    )) ;
    return ( user ) ;
  ),
) ;

Options API

export default (
  data() (
    return (
      utilisateur : (
        nom : "John",
        rôle : "ADMIN",
      ),
    ) ;
  ),
) ;

Reactive seulement fonctionne pour les types d'objets (objets, tableaux et types de collections tels que Carte et Set (jeu de mots)). Il ne peut pas contenir de types primitifs tels que chaîne de caractères, nombre ou booléen. Ainsi, Vue introduit également ref().

ref()

Pour ajouter de la réactivité aux éléments primitifs, il faut les entourer de ref().

Composition API

import ( ref ) de "vue" ;
export default (
  setup() (
    const count = ref(10) ;
    return ( count ) ;
  ),
) ;

Options API

export default (
  data() (
    return (
      count : 10,
    ) ;
  ),
) ;

Modifier les objets réactifs

Vous pouvez modifier les valeurs des objets directement à partir de la méthode réactive, mais pour modifier les valeurs primitives, vous devez utiliser la méthode .valeur champ.

import ( ref, reactive ) de "vue" ;
export default (
  setup() (
    const user = reactive((
      nom : "John",
    )) ;
    user.name = "John Doe" ; // Changement de valeur

    const count = ref(10) ;
    count.value = 20 ; // Changement de valeur

    return (
      utilisateur,
      count,
    ) ;
  ),
) ;

Vous ne doivent utiliser le .valeur dans le modèle.

<div>(( compte ))</div>

Propriétés calculées

Les propriétés calculées peuvent être facilement créées en passant une méthode comme paramètre à la méthode importée calculé() méthode.

import ( reactive, computed ) de "vue" ;
export default (
  setup() (
    const list = reactive([
      "Élément 1",
      "Élément 2",
    ]) ;

    // Calculé
    const isEmpty = computed(() => list.length === 0) ;

    return (
      liste,
      isEmpty,
    ) ;
  ),
) ;

Méthodes

Vous pouvez également imbriquer des méthodes dans le configuration méthode.

Composition API

import ( ref ) de "vue" ;
export default (
  setup() (
    const count = ref(10) ;

        // Méthode
    const increment = () => (
      count.value++ ;
    ) ;

    return (
      compte,
      incrément,
    ) ;
  ),
) ;

Observateurs

Les observateurs sont créés de la même manière que les calculé. Toutefois, n'oubliez pas de passer le mandataire objet, c'est-à-dire nomcomme dans l'exemple ci-dessous, et non le nom.valeur elle-même.

import ( watch, ref ) de "vue" ;
export default (
  setup() (
    const name = ref("John") ;
        // Observateur
    watch(name, (currentValue, oldValue) => (
      console.log(`Valeur changée de $(ancienneValeur)à $(valeur actuelle)`) ;
    )) ;
    return ( name ) ;
  ),
) ;

Résumé

Dans cet article, je ne vous ai donné que les bases de l'API de composition afin que vous ayez une compréhension générale de ses différences et de ses avantages par rapport à l'API d'options. L'API de composition fournit également des alternatives au reste des éléments du composant, tels que crochetset introduit de nouvelles méthodes, telles que watchEffect. Il est conseillé de le lire dans la version officielle. Vue 3 la documentation.