Cara menggunakan API Komposisi tema lanjutan Vue3

Apakah itu API Komposisi

API Komposisi ialah gaya API baharu yang diperkenalkan dalam Vue3, bertujuan untuk meningkatkan kebolehbacaan, kebolehselenggaraan dan kebolehgunaan semula kod. API Komposisi berbeza daripada API Pilihan dalam Vue2 Ia menggunakan kaedah pengaturcaraan berasaskan fungsi untuk menguraikan logik dalam komponen kepada unit fungsi boleh gubah yang lebih kecil untuk mencapai organisasi kod yang lebih fleksibel dan cekap.

Mengapa Vue3 mengesyorkan menggunakan API Komposisi

Sebab utama mengapa Vue3 mengesyorkan menggunakan API Komposisi adalah untuk menyusun dan menggunakan semula logik komponen dengan lebih baik.

Dalam Vue2, kami biasanya menggunakan API Pilihan, di mana kami mentakrifkan gelagat komponen dengan mentakrifkan pilihan yang berbeza seperti data, kaedah, pengiraan, dsb. Terdapat beberapa kelemahan pada pendekatan ini, seperti:

• Komponen besar menjadi sukar untuk diselenggara kerana kod yang berkaitan bertaburan merentasi pilihan yang berbeza.

• Komponen besar mungkin mempunyai logik pendua kerana kod itu sukar untuk digunakan semula.

• Ia boleh menjadi sukar untuk menjejak atribut data mana yang diubah suai dan bila.

Mari kita ambil contoh mudah di bawah Kod berikut mentakrifkan logik untuk mendapatkan data:

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

Logik ini merangkumi kaedah pemerolehan data, pemprosesan status pemuatan dan Logik untuk ralat. mesej dll. Kita boleh menggunakan logik ini dalam berbilang komponen untuk mengelakkan pertindihan kod.

Sebagai contoh, gunakan logik ini dalam komponen:

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

Sudah tentu, Vue2 juga boleh mencapai fungsi di atas melalui mixin, tetapi kebolehbacaan dan kebolehselenggaraan tidak sebaik Komposisi 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()
  }
}

dan kemudian gunakannya dalam komponen:

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

Anda dapat melihat bahawa menggunakan mixin boleh mencampurkan logik awam ke dalam komponen, tetapi terdapat beberapa masalah dalam pencampuran, seperti konflik penamaan, urutan panggilan mata kait kitaran hayat dan isu lain.

Atas ialah kandungan terperinci Cara menggunakan API Komposisi tema lanjutan Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!