M

MLOG

Français

Explorez en profondeur l'API de Composition de Vue.js 3. Apprenez à créer des applications Vue.js réutilisables, maintenables et testables avec des exemples pratiques et les meilleures pratiques pour les développeurs du monde entier.

API de Composition de Vue.js 3 : Un Guide Approfondi pour les Développeurs Mondiaux

Vue.js est rapidement devenu un choix populaire pour la création d'applications web modernes, grâce à sa courbe d'apprentissage accessible et à ses fonctionnalités puissantes. Vue.js 3 va plus loin avec l'introduction de l'API de Composition, une nouvelle façon d'organiser la logique de vos composants. Ce guide approfondi fournit une vue d'ensemble complète pour comprendre et utiliser efficacement l'API de Composition, vous dotant des compétences nécessaires pour créer des applications Vue plus maintenables, réutilisables et testables.

Qu'est-ce que l'API de Composition ?

L'API de Composition est un ensemble d'API qui nous permettent de créer des composants Vue en utilisant des fonctions importées au lieu de déclarer des options. Essentiellement, elle vous permet de regrouper la logique associée, peu importe où elle apparaît dans le template. Cela contraste avec l'API d'Options (data, methods, computed, watch), qui vous oblige à organiser le code en fonction de ces catégories prédéfinies. Considérez l'API d'Options comme organisant votre code par *ce qu'il est* (données, méthode, etc.), alors que l'API de Composition vous permet d'organiser le code par *ce qu'il fait*.

Le cœur de l'API de Composition tourne autour de la fonction setup(). Cette fonction est le point d'entrée pour utiliser l'API de Composition au sein d'un composant. À l'intérieur de setup(), vous pouvez définir l'état réactif, les propriétés calculées, les méthodes et les hooks de cycle de vie en utilisant des fonctions composables.

Pourquoi utiliser l'API de Composition ?

L'API de Composition offre plusieurs avantages par rapport à l'API d'Options traditionnelle, en particulier pour les applications plus grandes et plus complexes :

Comprendre les Concepts Fondamentaux

Plongeons dans les concepts clés qui sous-tendent l'API de Composition :

1. setup()

Comme mentionné précédemment, setup() est le point d'entrée pour utiliser l'API de Composition. C'est une option de composant qui est exécutée avant la création du composant. À l'intérieur de setup(), vous définissez l'état réactif, les propriétés calculées, les méthodes et les hooks de cycle de vie, puis vous retournez un objet contenant les valeurs que vous souhaitez exposer au template.

Exemple :

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

Dans cet exemple, nous utilisons ref pour créer une variable réactive appelée count. Nous définissons également une méthode appelée increment qui augmente la valeur de count. Enfin, nous retournons un objet contenant count et increment, ce qui les rend disponibles dans le template du composant.

2. État Réactif avec ref et reactive

L'API de Composition fournit deux fonctions principales pour créer un état réactif : ref et reactive.

Exemple avec ref :

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue!')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

Exemple avec reactive :

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      name: 'John Doe',
      age: 30
    })

    const updateName = (newName) => {
      state.name = newName
    }

    return {
      state,
      updateName
    }
  }
}

3. Propriétés Calculées avec computed

Les propriétés calculées sont des valeurs dérivées d'un autre état réactif. Elles sont automatiquement mises à jour chaque fois que leurs dépendances changent. La fonction computed prend une fonction getter en argument et retourne un ref réactif en lecture seule.

Exemple :

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('John')
    const lastName = ref('Doe')

    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

Dans cet exemple, fullName est une propriété calculée qui dépend de firstName et lastName. Chaque fois que firstName ou lastName change, fullName sera automatiquement mis à jour.

4. Observateurs avec watch et watchEffect

Les observateurs (watchers) vous permettent de réagir aux changements de l'état réactif. L'API de Composition offre deux manières principales de créer des observateurs : watch et watchEffect.

Exemple avec watch :

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(
      count,
      (newValue, oldValue) => {
        console.log(`Count changed from ${oldValue} to ${newValue}`)
      }
    )

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}

Exemple avec watchEffect :

import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const message = ref('Hello')

    watchEffect(() => {
      console.log(`Message is: ${message.value}`)
    })

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
}

5. Hooks de Cycle de Vie

L'API de Composition donne accès aux hooks de cycle de vie des composants via des fonctions qui commencent par on, telles que onMounted, onUpdated, et onUnmounted. Ces fonctions prennent un rappel en argument, qui sera exécuté lorsque le hook de cycle de vie correspondant est déclenché.

Exemple :

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted')
    })

    onUnmounted(() => {
      console.log('Component is unmounted')
    })

    return {}
  }
}

Créer des Fonctions Composables

La véritable puissance de l'API de Composition vient de la capacité à créer des fonctions composables réutilisables. Une fonction composable est simplement une fonction qui encapsule une partie de la logique d'un composant et retourne un état réactif et des fonctions qui peuvent être utilisés dans plusieurs composants.

Exemple : Créons une fonction composable qui suit la position de la souris :

import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  const updatePosition = (event) => {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition)
  })

  return {
    x,
    y
  }
}

Maintenant, vous pouvez utiliser cette fonction composable dans n'importe quel composant :

import { useMousePosition } from './useMousePosition'

export default {
  setup() {
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
}

Exemples Pratiques et Cas d'Utilisation

Explorons quelques exemples pratiques de la manière dont l'API de Composition peut être utilisée dans des scénarios réels :

1. Récupération de Données

Créer une fonction composable pour récupérer des données d'une API est un cas d'utilisation courant. Cela vous permet de réutiliser la même logique de récupération de données à travers plusieurs composants.

import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  onMounted(async () => {
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  })

  return {
    data,
    error,
    loading
  }
}

Vous pouvez ensuite utiliser cette fonction composable dans vos composants comme ceci :

import { useFetch } from './useFetch'

export default {
  setup() {
    const { data, error, loading } = useFetch('https://api.example.com/data')

    return {
      data,
      error,
      loading
    }
  }
}

2. Validation de Formulaire

La validation de formulaire est un autre domaine où l'API de Composition peut être très utile. Vous pouvez créer des fonctions composables qui encapsulent la logique de validation et les réutiliser dans différents formulaires.

import { ref } from 'vue'

export function useValidation() {
  const errors = ref({})

  const validateField = (fieldName, value, rules) => {
    let error = null
    for (const rule of rules) {
      if (rule === 'required' && !value) {
        error = 'This field is required'
        break
      } else if (rule === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        error = 'Invalid email format'
        break
      }
    }

    if (error) {
      errors.value[fieldName] = error
    } else {
      delete errors.value[fieldName]
    }
  }

  return {
    errors,
    validateField
  }
}

Utilisation dans un composant :

import { useValidation } from './useValidation'
import { ref } from 'vue'

export default {
  setup() {
    const { errors, validateField } = useValidation()
    const email = ref('')

    const validateEmail = () => {
      validateField('email', email.value, ['required', 'email'])
    }

    return {
      email,
      errors,
      validateEmail
    }
  }
}

3. Gestion de l'Authentification Utilisateur

La logique d'authentification peut souvent être complexe et dupliquée à travers plusieurs composants. L'API de Composition vous permet de créer une fonction composable qui encapsule toute la logique d'authentification et fournit une API propre à utiliser pour vos composants.

Exemple : (Simplifié)

import { ref } from 'vue'

export function useAuth() {
  const isLoggedIn = ref(false)
  const user = ref(null)

  const login = async (username, password) => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = true
    user.value = { username }
  }

  const logout = async () => {
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 1000))
    isLoggedIn.value = false
    user.value = null
  }

  return {
    isLoggedIn,
    user,
    login,
    logout
  }
}

Meilleures Pratiques pour Utiliser l'API de Composition

Pour tirer le meilleur parti de l'API de Composition, considérez les meilleures pratiques suivantes :

Pièges Courants et Comment les Éviter

Bien que l'API de Composition offre de nombreux avantages, il y a aussi quelques pièges courants à connaître :

L'API de Composition et les Équipes Mondiales

L'API de Composition favorise la collaboration au sein des équipes de développement mondiales en promouvant :

Conclusion

L'API de Composition de Vue.js 3 est un outil puissant qui peut améliorer considérablement l'organisation, la réutilisabilité et la testabilité de vos applications Vue. En comprenant les concepts fondamentaux et en suivant les meilleures pratiques décrites dans ce guide approfondi, vous pouvez tirer parti de l'API de Composition pour créer des applications plus maintenables et évolutives pour un public mondial. Adoptez l'API de Composition et libérez tout le potentiel de Vue.js 3.

Nous vous encourageons à expérimenter avec l'API de Composition dans vos propres projets et à explorer les vastes possibilités qu'elle offre. Bon codage !