Fungsi gabungan dalam Vue3: komponen penstrukturan secara logik

Vue3 ialah rangka kerja bahagian hadapan yang penting yang menyediakan banyak ciri dan fungsi berguna, salah satunya ialah komponen. Komponen Vue ialah konsep abstrak yang biasa digunakan dalam pembangunan bahagian hadapan. Komponen ini membahagikan halaman hujung hadapan kepada bahagian yang berasingan dan boleh digunakan semula Bahagian ini mempunyai keadaan dan tingkah laku bebas dan boleh digunakan semula dalam aplikasi yang berbeza.

Namun, dalam amalan, disebabkan kerumitan halaman muka hadapan dan interaksi antara komponen yang berbeza, komponen boleh menjadi bersepah dan sukar untuk diselenggara. Oleh itu, Vue3 menyediakan ciri baharu yang dipanggil fungsi gubahan, yang boleh menstrukturkan logik komponen dengan berkesan, dengan itu meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Berikut ialah beberapa pengenalan kepada fungsi gubahan Vue3.

Apakah fungsi gabungan?

Fungsi gubahan ialah fungsi baharu yang digunakan dalam Vue3, yang membolehkan pembangun membahagikan fungsi logik komponen kepada berbilang fungsi boleh guna semula dan menggabungkannya bersama-sama.

Dalam Vue2, logik komponen dilaksanakan melalui pilihan, seperti kaedah, pengiraan, pemerhati, dsb. Walau bagaimanapun, pendekatan ini boleh membawa kepada struktur kod yang berantakan, kerana semua pilihan yang berkaitan mesti diletakkan dalam objek yang sama.

Vue3 mengubahnya dengan menggabungkan fungsi. Ia membolehkan kami menyusun logik komponen dengan cara yang lebih terperinci, membahagikan fungsi kepada fungsi yang lebih kecil dan bebas. Setiap fungsi gabungan hanya memfokuskan pada aspek logik tertentu, seperti permintaan rangkaian, kemas kini status atau pemprosesan acara. Mereka boleh digabungkan bersama melalui fungsi gubahan untuk mencapai fungsi yang lebih kompleks.

Kelebihan fungsi gabungan

Kelebihan utama menggunakan fungsi gabungan ialah:

1 Meningkatkan kebolehgunaan semula kod

Fungsi gabungan membahagikan logik komponen kepada blok Kecil. supaya bongkah kecil ini boleh digunakan semula di tempat yang berbeza. Sebagai contoh, kita boleh mengekstrak fungsi yang mendapat data dan memanggilnya beberapa kali dalam komponen tanpa perlu menulis kaedah berulang kali untuk setiap komponen.

2. Meningkatkan kebolehbacaan kod

Menggunakan fungsi gabungan boleh menjadikan struktur kod lebih jelas dan lebih mudah difahami. Setiap fungsi hanya memfokuskan pada aspek logik tertentu, yang menjadikan kod lebih fokus dan lebih mudah untuk diselenggara.

3. Kemerdekaan

Fungsi gabungan mempunyai kebebasan yang lebih baik. Setiap fungsi hanya memfokuskan pada aspek logik tertentu, supaya fungsi setiap fungsi akan lebih mudah dan jelas, serta lebih mudah untuk diuji dan diselenggara.

Aplikasi Praktikal

Mari kita gunakan contoh khusus untuk memahami cara menggunakan fungsi gabungan dalam Vue3.

Andaikan kita mempunyai komponen carian yang perlu digunakan di berbilang lokasi Komponen tersebut mempunyai logik berikut:

1. Menerima istilah carian sebagai parameter.
2. Cari data yang sepadan dengan memanggil API.
3. Paparkan hasil carian pada antara muka.

Untuk komponen ini, kita boleh mencipta fungsi gabungan yang dipanggil useSearch, yang mengandungi tiga logik di atas:

import { ref } from 'vue'

export default function useSearch(keyword) {
  const searchResult = ref([])

  // 调用搜索API，并更新搜索结果
  async function search() {
    const res = await fetch(`https://api/?q=${keyword}`)
    searchResult.value = await res.json()
  }

  search() // 初始化调用一次

  return {
    searchResult,
    search
  }
}

dalam komponen

<template>
  <div>
    <input type="text" v-model="keyword" @keyup.enter="doSearch" />
    <ul>
      <li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import useSearch from './useSearch'

export default {
  setup() {
    const { search, searchResult } = useSearch('default')

    const keyword = ref('')

    function doSearch() {
      search(keyword.value)
    }

    return {
      searchResult,
      keyword,
      doSearch
    }
  }
}
</script>

Oleh Logik komponen ialah berpecah kepada fungsi berasingan untuk mencipta useSearch, yang boleh kami gunakan semula di mana-mana sahaja kami memerlukan fungsi carian. Dalam komponen, kami merujuk useSearch dan mencipta keadaan carian yang dikaitkan dengan komponen, dan fungsi doSearch, yang mengemas kini keadaan carian dengan memanggil fungsi search().

Kesimpulan

Fungsi gubahan Vue3 menjadikan komponen lebih mudah untuk diselenggara dan meningkatkan kebolehbacaan dan kebolehgunaan semula kod. Dengan membahagikan logik komponen kepada fungsi yang berasingan dan menggabungkannya bersama-sama, kita boleh menstrukturkan fungsi yang kompleks supaya setiap fungsi lebih ringkas dan lebih mudah difahami.

Apabila kami perlu menggabungkan berbilang fungsi bersama, kami menggunakan fungsi menyediakan dan menyuntik Vue3 untuk menghantarnya ke dalam komponen kanak-kanak. Dalam amalan, kami boleh menggunakan fungsi gubahan Vue3 untuk membangunkan aplikasi bahagian hadapan yang lebih fleksibel dan boleh diselenggara.

Atas ialah kandungan terperinci Fungsi gabungan dalam Vue3: komponen penstrukturan secara logik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!