組合式API介紹

通過(guò)創(chuàng)建 Vue 組件，我們可以將接口的可重復(fù)部分及其功能提取到可重用的代碼段中。僅此一項(xiàng)就可以使我們的應(yīng)用程序在可維護(hù)性和靈活性方面走得更遠(yuǎn)。然而，我們的經(jīng)驗(yàn)已經(jīng)證明，光靠這一點(diǎn)可能是不夠的，尤其是當(dāng)你的應(yīng)用程序變得非常大的時(shí)候——想想幾百個(gè)組件。在處理如此大的應(yīng)用程序時(shí)，共享和重用代碼變得尤為重要。

假設(shè)在我們的應(yīng)用程序中，我們有一個(gè)視圖來(lái)顯示某個(gè)用戶的倉(cāng)庫(kù)列表。除此之外，我們還希望應(yīng)用搜索和篩選功能。處理此視圖的組件可能如下所示：

//?src/components/UserRepositories.vue

export?default?{
??components:?{?RepositoriesFilters,?RepositoriesSortBy,?RepositoriesList?},
??props:?{
????user:?{?type:?String?}
??},
??data?()?{
????return?{
??????repositories:?[],?//?1
??????filters:?{?...?},?//?3
??????searchQuery:?''?//?2
????}
??},
??computed:?{
????filteredRepositories?()?{?...?},?//?3
????repositoriesMatchingSearchQuery?()?{?...?},?//?2
??},
??watch:?{
????user:?'getUserRepositories'?//?1
??},
??methods:?{
????getUserRepositories?()?{
??????//?使用?`this.user`?獲取用戶倉(cāng)庫(kù)
????},?//?1
????updateFilters?()?{?...?},?//?3
??},
??mounted?()?{
????this.getUserRepositories()?//?1
??}
}

該組件有以下幾個(gè)職責(zé)：

從假定的外部 API 獲取該用戶名的倉(cāng)庫(kù)，并在用戶更改時(shí)刷新它

使用 searchQuery 字符串搜索存儲(chǔ)庫(kù)

使用 filters 對(duì)象篩選倉(cāng)庫(kù)

用組件的選項(xiàng) (data、computed、methods、watch) 組織邏輯在大多數(shù)情況下都有效。然而，當(dāng)我們的組件變得更大時(shí)，邏輯關(guān)注點(diǎn)的列表也會(huì)增長(zhǎng)。這可能會(huì)導(dǎo)致組件難以閱讀和理解，尤其是對(duì)于那些一開(kāi)始就沒(méi)有編寫這些組件的人來(lái)說(shuō)。

一個(gè)大型組件的示例，其中邏輯關(guān)注點(diǎn)是按顏色分組。

這種碎片化使得理解和維護(hù)復(fù)雜組件變得困難。選項(xiàng)的分離掩蓋了潛在的邏輯問(wèn)題。此外，在處理單個(gè)邏輯關(guān)注點(diǎn)時(shí)，我們必須不斷地“跳轉(zhuǎn)”相關(guān)代碼的選項(xiàng)塊。

如果我們能夠?qū)⑴c同一個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼配置在一起會(huì)更好。而這正是組合式 API 使我們能夠做到的。

組合式 API 基礎(chǔ)

既然我們知道了為什么，我們就可以知道怎么做。為了開(kāi)始使用組合式 API，我們首先需要一個(gè)可以實(shí)際使用它的地方。在 Vue 組件中，我們將此位置稱為 setup。

setup 組件選項(xiàng)

新的 setup 組件選項(xiàng)在創(chuàng)建組件之前執(zhí)行，一旦 props 被解析，并充當(dāng)合成 API 的入口點(diǎn)。

由于在執(zhí)行 setup 時(shí)尚未創(chuàng)建組件實(shí)例，因此在 setup 選項(xiàng)中沒(méi)有 this。這意味著，除了 props 之外，你將無(wú)法訪問(wèn)組件中聲明的任何屬性——本地狀態(tài)、計(jì)算屬性或方法。

setup 選項(xiàng)應(yīng)該是一個(gè)接受 props 和 context 的函數(shù)，我們將在稍后討論。此外，我們從 setup 返回的所有內(nèi)容都將暴露給組件的其余部分 (計(jì)算屬性、方法、生命周期鉤子等等) 以及組件的模板。

讓我們添加 setup 到我們的組件中：

//?src/components/UserRepositories.vue

export?default?{
??components:?{?RepositoriesFilters,?RepositoriesSortBy,?RepositoriesList?},
??props:?{
????user:?{?type:?String?}
??},
??setup(props)?{
????console.log(props)?//?{?user:?''?}

????return?{}?//?這里返回的任何內(nèi)容都可以用于組件的其余部分
??}
??//?組件的“其余部分”
}

現(xiàn)在讓我們從提取第一個(gè)邏輯關(guān)注點(diǎn)開(kāi)始 (在原始代碼段中標(biāo)記為“1”)。

“

從假定的外部 API 獲取該用戶名的倉(cāng)庫(kù)，并在用戶更改時(shí)刷新它

”

我們將從最明顯的部分開(kāi)始：

• 倉(cāng)庫(kù)列表
• 更新倉(cāng)庫(kù)列表的函數(shù)
• 返回列表和函數(shù)，以便其他組件選項(xiàng)可以訪問(wèn)它們

//?src/components/UserRepositories.vue?`setup`?function
import?{?fetchUserRepositories?}?from?'@/api/repositories'

//?在我們的組件內(nèi)
setup?(props)?{
??let?repositories?=?[]
??const?getUserRepositories?=?async?()?=>?{
????repositories?=?await?fetchUserRepositories(props.user)
??}

??return?{
????repositories,
????getUserRepositories?//?返回的函數(shù)與方法的行為相同
??}
}

這是我們的出發(fā)點(diǎn)，但它還不能工作，因?yàn)槲覀兊?repositories 變量是非響應(yīng)式的。這意味著從用戶的角度來(lái)看，倉(cāng)庫(kù)列表將保持為空。我們來(lái)解決這個(gè)問(wèn)題！

帶 ref 的響應(yīng)式變量

在 Vue 3.0 中，我們可以通過(guò)一個(gè)新的 ref 函數(shù)使任何響應(yīng)式變量在任何地方起作用，如下所示：

<div?class="template-m-wrap">counter?--->?{{?counter?}}div>
</template> 《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的组合筛选vue_Vue 3 组合式API介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。