So verwenden Sie die Vue3 Advanced Theme Composition API

Was ist Composition API?

Composition API ist ein neuer API-Stil, der in Vue3 eingeführt wurde und darauf abzielt, die Lesbarkeit, Wartbarkeit und Wiederverwendbarkeit von Code zu verbessern. Die Composition API unterscheidet sich von der Options API in Vue2. Sie verwendet eine funktionsbasierte Programmiermethode, um die Logik innerhalb der Komponente in kleinere zusammensetzbare Funktionseinheiten zu zerlegen, um eine flexiblere und effizientere Codeorganisation zu erreichen.

Warum Vue3 die Verwendung der Composition API empfiehlt

Der Hauptgrund, warum Vue3 die Verwendung der Composition API empfiehlt, ist die bessere Organisation und Wiederverwendung der Komponentenlogik.

In Vue2 verwenden wir normalerweise die Options-API, wo wir das Verhalten der Komponente definieren, indem wir verschiedene Optionen (wie Daten, Methoden, berechnet usw.) definieren. Dieser Ansatz hat einige Nachteile, wie zum Beispiel:

• Große Komponenten werden schwierig zu warten, da zugehöriger Code über verschiedene Optionen verstreut ist.

• Große Komponenten verfügen möglicherweise über doppelte Logik, da der Code schwer wiederzuverwenden ist.

• Nachzuverfolgen, welche Datenattribute wann geändert wurden, kann schwierig werden.

Nehmen wir unten ein einfaches Beispiel. Der folgende Code definiert eine Logik zum Abrufen von Daten:

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
  }
}

Diese Logik deckt die Logik von Datenerfassungsmethoden, Ladestatusverarbeitung, Fehlermeldungen usw. ab. Wir können diese Logik in mehreren Komponenten verwenden, um eine Duplizierung des Codes zu vermeiden.

Verwenden Sie beispielsweise diese Logik in einer Komponente:

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

Natürlich kann Vue2 die obige Funktion auch über mixin erreichen, aber die Lesbarkeit und Wartbarkeit sind nicht so gut wie bei der Kompositions-API: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 Dann bei Verwendung in Komponenten: rrreee

Sie können sehen, dass mit mixin öffentliche Logik in Komponenten gemischt werden kann, es jedoch einige Probleme beim Mischen gibt, wie z. B. 🎜Namenskonflikte🎜, die aufrufende Ordnung des Lebens Fahrradhaken usw. Frage. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vue3 Advanced Theme Composition API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!