Petua Vue Composables yang Perlu Anda Tahu

Komposable Vue sangat berkuasa, tetapi ia boleh menjadi kucar-kacir dan sukar diselenggara dengan cepat jika anda tidak berhati-hati.

Itulah sebabnya saya telah mengenal pasti 13 petua yang akan membantu anda menulis komposisi yang lebih baik dan lebih mudah diselenggara.

Sama ada anda sedang membina penyelesaian pengurusan keadaan yang ringkas atau logik perkongsian yang kompleks, petua ini akan membantu anda:

• Elakkan perangkap biasa yang membawa kepada kod spageti
• Tulis komposit yang lebih mudah untuk diuji dan diselenggara
• Buat logik kongsi yang lebih fleksibel dan boleh digunakan semula
• Berpindah secara beransur-ansur daripada API Pilihan kepada API Komposisi jika anda perlu

Petua yang akan anda pelajari ialah:

1. Elakkan Penggerudian Prop Melalui Berbilang Komponen
2. Kongsi Data Antara Komponen Tidak Berkaitan
3. Kawal Kemas Kini Negeri dengan Kaedah Jelas
4. Pecahkan Komponen Besar kepada Fungsi yang Lebih Kecil
5. Asingkan Logik Perniagaan daripada Vue Reactivity
6. Kendalikan Kedua-dua Data Penyegerakan dan Async dalam Satu Fungsi
7. Jadikan Parameter Fungsi Lebih Deskriptif
8. Halang Pilihan Tidak Ditakrifkan dengan Nilai Lalai
9. Kembalikan Nilai Mudah atau Kompleks Berdasarkan Keperluan
10. Asingkan Laluan Logik Berbeza ke dalam Fungsinya Sendiri
11. Kendalikan Nilai Reaktif dan Mentah Secara Konsisten
12. Mudahkan Pembukaan Ruj
13. Berpindah daripada API Pilihan kepada API Komposisi Secara Berperingkat

Mari kita menyelami setiap corak dan lihat cara mereka boleh menambah baik aplikasi Vue anda.

Dan jangan lupa, komen di bawah dengan petua kegemaran anda!

1. Elakkan Penggerudian Prop Melalui Berbilang Komponen

Corak Stor Data boleh membantu mengelakkan prop dan acara melalui berbilang lapisan komponen.

Satu situasi ialah anda mempunyai ibu bapa dan anak yang berkomunikasi melalui penggerudian prop yang tidak berkesudahan dan acara menggelegak:

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

Ini mewujudkan banyak kerumitan kerana prop dan acara tersebut perlu bergerak ke sana ke mari melalui hierarki komponen.

Penyelesaian yang lebih mudah ialah mencipta stor data kongsi yang boleh diimport oleh mana-mana komponen:

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

2. Kongsi Data Antara Komponen Tidak Berkaitan

Corak Data Store juga membantu apabila komponen adik-beradik atau "sepupu" perlu berkongsi data yang sama tanpa sebarang sambungan langsung.

Andaikan dua beradik kedua-duanya memerlukan objek pengguna yang sama, tetapi tiada laluan elegan untuk prop atau acara.

Ini selalunya mengakibatkan data janggal bergelut melalui induk atau keadaan pendua.

Pendekatan yang lebih baik adalah bergantung pada satu kedai boleh guna yang boleh digunakan oleh kedua-dua adik beradik:

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

3. Kawal Kemas Kini Negeri dengan Kaedah Jelas

Corak Stor Data menggalakkan penyediaan kaedah yang jelas untuk mengemas kini keadaan kongsi.

Sesetengah pembangun mendedahkan keseluruhan objek reaktif kepada dunia, seperti ini:

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

Itu membolehkan sesiapa sahaja menukar sifat darkMode pengguna terus daripada mana-mana fail, yang boleh membawa kepada mutasi yang bertaburan dan tidak terkawal.

Idea yang lebih baik ialah mengembalikan keadaan sebagai baca sahaja bersama-sama dengan fungsi yang menentukan cara kemas kini berlaku:

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

4. Pecahkan Komponen Besar kepada Fungsi yang Lebih Kecil

Corak Kompos Sebaris membantu memecahkan komponen besar dengan mengumpulkan keadaan dan logik yang berkaitan kepada fungsi yang lebih kecil.

Komponen gergasi mungkin meletakkan semua rujukan dan kaedahnya di satu tempat:

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

Persediaan itu dengan cepat menjadi tidak terurus.

Sebaliknya, gubah sebaris boleh mengumpulkan logik dan menyediakannya secara setempat. Kami kemudiannya boleh mengekstraknya ke dalam fail berasingan kemudian:

export const user = reactive({ darkMode: false })

5. Asingkan Logik Perniagaan daripada Vue Reactivity

Corak Kompos Nipis memberitahu kami untuk memisahkan logik perniagaan mentah daripada kereaktifan Vue supaya ujian dan penyelenggaraan menjadi lebih mudah.

Anda mungkin membenamkan semua logik dalam kompos:

import { reactive, readonly } from 'vue'
const state = reactive({ darkMode: false })

export function toggleDarkMode() {
  state.darkMode = !state.darkMode
}

export function useUserStore() {
  return {
    darkMode: readonly(state.darkMode),
    toggleDarkMode
  }
}

Itu memaksa anda untuk menguji logik dalam persekitaran Vue.

Sebaliknya, simpan peraturan yang rumit dalam fungsi tulen dan biarkan yang boleh digubah hanya mengendalikan pembalut reaktif:

<script setup>
const count = ref(0)
const user = ref({ name: 'Alice' })
// 500 more lines of intertwined code with watchers, methods, etc.
</script>

6. Mengendalikan Kedua-dua Data Penyegerakan dan Async dalam Satu Fungsi

Corak Async Sync Composables menggabungkan kedua-dua gelagat segerak dan tak segerak menjadi satu composable dan bukannya mencipta fungsi berasingan.

Ini sama seperti cara Nuxt's useAsyncData berfungsi.

Di sini kami mempunyai satu kompos yang boleh mengembalikan janji sambil turut memberikan sifat reaktif serta-merta untuk penggunaan segerak:

<script setup>
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

const { count, increment } = useCounter()
</script>

7. Jadikan Parameter Fungsi Lebih Deskriptif

Corak Objek Pilihan boleh mengosongkan senarai panjang parameter dengan mengharapkan satu objek konfigurasi.

Panggilan seperti ini menyusahkan dan terdedah kepada kesilapan, dan menambah pilihan baharu memerlukan mengemas kini tandatangan fungsi:

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = (count.value * 3) / 2
  }
  return { count, increment }
}

Tidak jelas maksud setiap hujah.

Karang boleh yang menerima objek pilihan memastikan semuanya deskriptif:

// counterLogic.js
export function incrementCount(num) {
  return (num * 3) / 2
}

// useCounter.js
import { ref } from 'vue'
import { incrementCount } from './counterLogic'

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = incrementCount(count.value)
  }
  return { count, increment }
}

8. Cegah Pilihan Tidak Ditakrifkan dengan Nilai Lalai

Corak Objek Pilihan juga mengesyorkan nilai lalai untuk setiap sifat.

Fungsi yang menganggap medan tertentu wujud boleh menjadi masalah jika ia tidak diluluskan:

import { ref } from 'vue'

export function useAsyncOrSync() {
  const data = ref(null)
  const promise = fetch('/api')
    .then(res => res.json())
    .then(json => {
      data.value = json
      return { data }
    })
  return Object.assign(promise, { data })
}

Adalah lebih baik untuk memusnahkan pilihan dengan lalai selamat:

useRefHistory(someRef, true, 10, 500, 'click', false)

9. Kembalikan Nilai Mudah atau Kompleks Berdasarkan Keperluan

Corak Pemulangan Dinamik memastikan kompos boleh mengembalikan sama ada nilai tunggal untuk kes penggunaan mudah atau objek dikembangkan dengan kawalan yang lebih maju.

Sesetengah pendekatan sentiasa mengembalikan objek dengan segala-galanya:

<!-- Parent.vue -->
<template>
  <!-- But many more layers of components -->
  <Child :user="user" @change="onUserChange" />
</template>

<script setup>
const user = ref({ name: 'Alice' })
function onUserChange(updatedUser) {
  user.value = updatedUser
}
</script>

Sesiapa yang hanya memerlukan nilai reaktif utama terpaksa berurusan dengan barangan tambahan.

Kompos yang mengembalikan satu ref atau objek secara bersyarat menyelesaikannya:

import { reactive, toRefs } from 'vue'
const state = reactive({ user: { name: 'Alice' } })

export function useUserStore() {
  return toRefs(state)
}

10. Asingkan Laluan Logik Berbeza ke dalam Fungsinya Sendiri

Corak Kompos Tersembunyi membantu mengelakkan percampuran logik yang saling eksklusif dalam gubahan yang sama.

Sesetengah kod mencantumkan berbilang mod atau laluan kod:

// SiblingA.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

// SiblingB.vue
import { useUserStore } from './useUserStore'
const { user } = useUserStore()

Memisahkan setiap laluan kepada boleh digubah sendiri adalah lebih jelas dan tidak menjejaskan fungsi:

export const user = reactive({ darkMode: false })

11. Mengendalikan Nilai Reaktif dan Mentah Secara Konsisten

Corak Argumen Fleksibel memastikan input dan output dalam komposit dikendalikan secara seragam sebagai data reaktif atau nilai mentah, mengelakkan kekeliruan.

Sesetengah kod menyemak sama ada input ialah rujukan atau bukan:

import { reactive, readonly } from 'vue'
const state = reactive({ darkMode: false })

export function toggleDarkMode() {
  state.darkMode = !state.darkMode
}

export function useUserStore() {
  return {
    darkMode: readonly(state.darkMode),
    toggleDarkMode
  }
}

Sebaliknya, anda boleh menukar serta-merta.

Dengan menggunakan ref, jika input ialah ref, ref tersebut akan dikembalikan. Jika tidak, ia akan ditukar kepada rujukan:

<script setup>
const count = ref(0)
const user = ref({ name: 'Alice' })
// 500 more lines of intertwined code with watchers, methods, etc.
</script>

12. Permudahkan Ref Membuka Balutan

Corak Argumen Fleksibel juga menggunakan toValue apabila membuka balutan diperlukan.

Tanpanya, kod mungkin terus melakukan semakan isRef:

<script setup>
function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

const { count, increment } = useCounter()
</script>

Lebih mudah untuk menghubungi:

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = (count.value * 3) / 2
  }
  return { count, increment }
}

13. Berpindah daripada API Pilihan kepada API Komposisi Secara Berperingkat

Pilihan kepada Corak Komposisi membolehkan anda memindahkan komponen API Pilihan yang besar ke dalam API Komposisi langkah demi langkah dengan cara tambahan yang mudah diikuti.

Komponen Pilihan klasik mungkin melakukan ini:

// counterLogic.js
export function incrementCount(num) {
  return (num * 3) / 2
}

// useCounter.js
import { ref } from 'vue'
import { incrementCount } from './counterLogic'

export function useCounter() {
  const count = ref(0)
  function increment() {
    count.value = incrementCount(count.value)
  }
  return { count, increment }
}

Data, sifat dikira dan kaedah bertaburan.

Menukarnya kepada persediaan skrip menariknya bersama-sama dan menjadikannya lebih mudah untuk diikuti serta membolehkan anda menggunakan corak ini:

import { ref } from 'vue'

export function useAsyncOrSync() {
  const data = ref(null)
  const promise = fetch('/api')
    .then(res => res.json())
    .then(json => {
      data.value = json
      return { data }
    })
  return Object.assign(promise, { data })
}

Membungkusnya

13 petua ini akan membantu anda menulis komposable Vue yang lebih baik yang lebih mudah diselenggara, diuji dan digunakan semula merentas aplikasi anda.

Tetapi kami hanya menconteng permukaan di sini.

Selama bertahun-tahun, saya telah mengumpulkan lebih banyak corak dan petua, dan saya telah memasukkan semuanya ke dalam kursus yang mendalam tentang corak boleh gubah.

Ia merangkumi 16 corak secara keseluruhan, dan setiap corak mempunyai:

• Penjelasan mendalam — masa untuk menggunakannya, bekas tepi dan variasi
• Contoh dunia sebenar — supaya anda boleh melihat cara menggunakannya selain daripada contoh mudah ini
• Contoh pemfaktoran semula langkah demi langkah — supaya anda boleh melihat cara menggunakannya pada kod anda sendiri

Pergi ke sini untuk mengetahui lebih lanjut.

Oh, dan kursus ini dijual sehingga 15 Januari, jadi anda boleh mendapatkannya dengan diskaun hebat sekarang!

Lihat Corak Reka Bentuk Boleh Gubah

Atas ialah kandungan terperinci Petua Vue Composables yang Perlu Anda Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!