Comment utiliser l'API de composition du thème avancé Vue3

Qu'est-ce que l'API Composition

L'API Composition est un nouveau style d'API introduit dans Vue3, visant à améliorer la lisibilité, la maintenabilité et la réutilisabilité du code. L'API de composition est différente de l'API d'options de Vue2. Elle adopte une méthode de programmation basée sur les fonctions pour décomposer la logique au sein du composant en unités de fonctions composables plus petites afin d'obtenir une organisation du code plus flexible et plus efficace.

Pourquoi Vue3 recommande d'utiliser l'API Composition

La principale raison pour laquelle Vue3 recommande d'utiliser l'API Composition est de mieux organiser et réutiliser la logique des composants.

Dans Vue2, nous utilisons généralement l'API Options, où nous définissons le comportement du composant en définissant différentes options (telles que les données, les méthodes, calculées, etc.). Cette approche présente certains inconvénients, tels que :

• Les composants volumineux deviennent difficiles à maintenir car le code associé est dispersé entre différentes options.

• Les composants volumineux peuvent avoir une logique en double car le code est difficile à réutiliser.

• Suivre quels attributs de données ont été modifiés et quand ils ont été modifiés peut devenir difficile.

Prenons un exemple simple ci-dessous. Le code suivant définit une logique d'obtention des données :

import { reactive, onMounted } from 'vue'
import axios from 'axios'
export function useData(url) {
  const data = reactive({
    loading: false,
    error: null,
    items: []
  })
  const fetchData = async () => {
    data.loading = true
    try {
      const response = await axios.get(url)
      data.items = response.data
    } catch (error) {
      data.error = error.message
    }
    data.loading = false
  }
  onMounted(() => {
    fetchData()
  })
  return {
    data,
    fetchData
  }
}

Cette logique couvre la logique des méthodes d'acquisition de données, le traitement de l'état de chargement, les messages d'erreur, etc. Nous pouvons utiliser cette logique dans plusieurs composants pour éviter la duplication de code.

Par exemple, utilisez cette logique dans un composant :

import { useData } from './useData'
export default {
  setup() {
    const { data } = useData('https://api.example.com/data')
    return {
      data
    }
  }
}

Bien sûr, Vue2 peut également réaliser la fonction ci-dessus via mixin, mais la lisibilité et la maintenabilité ne sont pas aussi bonnes que l'API de composition :mixin也能实现上面的功能, 但可读性和可维护性不如Composition API:

const dataMixin = {
  data() {
    return {
      loading: false,
      error: null,
      items: []
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      axios.get(this.url)
        .then(response => {
          this.items = response.data
        })
        .catch(error => {
          this.error = error.message
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  mounted() {
    this.fetchData()
  }
}

然后在组件中使用:

export default {
  mixins: [dataMixin],
  data() {
    return {
      url: 'https://api.example.com/data'
    }
  }
}

可以看到，使用mixinrrreee Ensuite, lorsqu'il est utilisé dans des composants : rrreee

Vous pouvez voir que l'utilisation de mixin peut mélanger la logique publique dans les composants, mais il y a quelques problèmes dans le mélange, tels que les 🎜conflits de noms🎜, l'ordre d'appel de la vie crochets à vélo, etc. question. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!