按照一個系統(tǒng)的來說，可組合項負(fù)責(zé)存儲主要業(yè)務(wù)邏輯（如計算、操作、流程），因此它們是應(yīng)用程序的關(guān)鍵部分。
通過重構(gòu)構(gòu)建新可組合項的方法，使它們可維護(hù)、易于測試且真正有用。
在本文中，我將總結(jié)我們創(chuàng)建的想法，并將它們與我在幾篇文章中讀到的良好實(shí)踐和設(shè)計模式相結(jié)合。
所以本文將分為三個部分：
通用設(shè)計模式
我的建議
進(jìn)一步閱讀
享受并且讓我知道您在項目中使用的模式和實(shí)踐??
通用設(shè)計模式
我認(rèn)為了解構(gòu)建可組合項模式的最佳來源實(shí)際上是 Vue.js 文檔，您可以在此處查看（https://vuejs.org/guide/reusability/composables.html）
基本可組合
Vue 文檔顯示了以下 useMouse 可組合項的示例：
Vue 文檔顯示了以下 useMouse 可組合項的示例：
// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 按照慣例，可組合函數(shù)名稱以“use”開頭
export function useMouse() {
// 由可組合項封裝和管理的狀態(tài)
const x = ref(0)
const y = ref(0)
// 可組合項可以隨著時間的推移更新其托管狀態(tài)。
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
// 可組合項還可以掛接到其所有者組件的
// 設(shè)置和拆卸副作用的生命周期。
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
// 將托管狀態(tài)公開為返回值
return { x, y }
}稍后可以在組件中使用它，如下所示：
<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>Mouse position is at: {{ x }}, {{ y }}</template>異步可組合項
為了獲取數(shù)據(jù)，Vue 建議使用以下可組合結(jié)構(gòu)：
import { ref, watchEffect, toValue } from 'vue'
export function useFetch(url) {
const data = ref(null)
const error = ref(null)
watchEffect(() => {
// 獲取之前重置狀態(tài)..
data.value = null
error.value = null
// toValue() 解開潛在的 refs 或 getters
fetch(toValue(url))
.then((res) => res.json())
.then((json) => (data.value = json))
.catch((err) => (error.value = err))
})
return { data, error }
}然后可以在組件中使用它，如下所示：
<script setup>
import { useFetch } from './fetch.js'
const { data, error } = useFetch('...')
</script>可組合合約
根據(jù)上面的示例，以下是所有可組合項都應(yīng)遵循的約定：
例如，可組合文件名應(yīng)以 use 開頭useSomeAmazingFeature.ts
它可以接受輸入?yún)?shù)，這些參數(shù)可以是字符串等基本類型，也可以接受 refs 和 getter，但它需要使用 toValue 幫助器
可組合項應(yīng)該返回一個 ref 值，可以在解構(gòu)可組合項后訪問該值，例如const { x, y } = useMouse()
可組合項可以保存可以在應(yīng)用程序中訪問和修改的全局狀態(tài)。
可組合性可能會導(dǎo)致副作用，例如添加窗口事件偵聽器，但在卸載組件時應(yīng)清除它們。
<script setup>可組合項只能在鉤子中調(diào)用setup()。它們也應(yīng)該在這些上下文中同步調(diào)用。在某些情況下，您還可以在生命周期掛鉤中調(diào)用它們，例如onMounted().
可組合項可以調(diào)用內(nèi)部的其他可組合項。
可組合項應(yīng)在內(nèi)部包裝某些邏輯，當(dāng)過于復(fù)雜時，應(yīng)將它們提取到單獨(dú)的可組合項中以便于測試。
我的建議
我已經(jīng)為我的工作項目和開源項目構(gòu)建了多個可組合項 - NuxtAlgolia、NuxtCloudinary、NuxtMedusa，因此基于這些，我想根據(jù)我的經(jīng)驗在上面的合同中添加一些要點(diǎn)。
>有狀態(tài)或/和純函數(shù)可組合項
在代碼標(biāo)準(zhǔn)化的某個時刻，您可能會得出這樣的結(jié)論：您希望對可組合項中的狀態(tài)保留做出決定。
最容易測試的函數(shù)是那些不存儲任何狀態(tài)的函數(shù)（即它們是簡單的輸入/輸出函數(shù)），例如負(fù)責(zé)將字節(jié)轉(zhuǎn)換為人類可讀值的可組合函數(shù)。它接受一個值并返回一個不同的值 - 它不存儲任何狀態(tài)。
別誤會我的意思，你不必做出決定OR。您可以完全保留有狀態(tài)和無狀態(tài)可組合項。但這應(yīng)該是一個書面決定，以便以后更容易與他們合作 ??
可組合項的單元測試
我們希望使用 Vitest 為我們的前端應(yīng)用程序?qū)嵤﹩卧獪y試。在后端工作時，進(jìn)行單元測試代碼覆蓋率非常有用，因為您主要關(guān)注邏輯。然而，在前端，您通常使用視覺效果。
因此，我們認(rèn)為對整個組件進(jìn)行單元測試可能不是最好的主意，因為我們基本上將對框架本身進(jìn)行單元測試（如果按下按鈕，檢查狀態(tài)是否更改或模式是否打開）。
由于我們已將所有業(yè)務(wù)邏輯移至可組合項（基本上是 TypeScript 函數(shù)）內(nèi)，因此它們很容易使用 Vitest 進(jìn)行測試，并且允許我們擁有更穩(wěn)定的系統(tǒng)。
可組合項的范圍
不久前，在 VueStorefront 中，我們開發(fā)了自己的可組合方法（早在它們實(shí)際上像這樣被調(diào)用之前）。在我們的方法中，我們使用可組合項來映射電子商務(wù)的業(yè)務(wù)領(lǐng)域，如下所示：
const { cart, load, addItem, removeItem, remove, ... } = useCart()這種方法絕對有用，因為它允許將域包裝在一個函數(shù)中。在諸如useProduct或 之useCategory類的更簡單的示例中，實(shí)現(xiàn)和維護(hù)相對簡單。然而，正如您在此處的示例中所看到的，useCart當(dāng)包裝一個包含更多邏輯而不僅僅是數(shù)據(jù)獲取的域時，這個可組合項正在發(fā)展成為一種非常難以開發(fā)和維護(hù)的形狀。
此時，我開始為 Nuxt 生態(tài)系統(tǒng)做出貢獻(xiàn)，其中引入了不同的方法。在這種新方法中，每個可組合項僅負(fù)責(zé)一件事。因此，useCart我們的想法不是構(gòu)建一個巨大的可組合項，而是為每個功能構(gòu)建可組合項useAddToCart，例如useFetchCart，，，useRemovefromCart等等。
因此，維護(hù)和測試這些可組合項應(yīng)該更容易 ??
進(jìn)一步閱讀
這將是我的研究的全部內(nèi)容。如果您想了解有關(guān)此主題的更多信息，請務(wù)必查看以下文章：
https://vuejs.org/guide/reusability/composables.html
https://vueschool.io/articles/vuejs-tutorials/what-is-a-vue-js-composable/
https://blog.logrocket.com/getting-started-vue-composables/
https://macopedia.com/blog/news/how-can-vue-3-composables-make-your-life-easier文章來源：http://www.zghlxwxcb.cn/article/339.html
文章來源地址http://www.zghlxwxcb.cn/article/339.html
到此這篇關(guān)于Vue 可組合項的良好實(shí)踐和設(shè)計模式的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
