組合式API介紹

通過創(chuàng)建 Vue 組件，我們可以將接口的可重復部分及其功能提取到可重用的代碼段中。僅此一項就可以使我們的應用程序在可維護性和靈活性方面走得更遠。然而，我們的經(jīng)驗已經(jī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`?獲取用戶倉庫
????},?//?1
????updateFilters?()?{?...?},?//?3
??},
??mounted?()?{
????this.getUserRepositories()?//?1
??}
}

該組件有以下幾個職責：

從假定的外部 API 獲取該用戶名的倉庫，并在用戶更改時刷新它

使用 searchQuery 字符串搜索存儲庫

使用 filters 對象篩選倉庫

用組件的選項 (data、computed、methods、watch) 組織邏輯在大多數(shù)情況下都有效。然而，當我們的組件變得更大時，邏輯關注點的列表也會增長。這可能會導致組件難以閱讀和理解，尤其是對于那些一開始就沒有編寫這些組件的人來說。

一個大型組件的示例，其中邏輯關注點是按顏色分組。

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

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

組合式 API 基礎

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

setup 組件選項

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

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

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

讓我們添加 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)在讓我們從提取第一個邏輯關注點開始 (在原始代碼段中標記為“1”)。

“

從假定的外部 API 獲取該用戶名的倉庫，并在用戶更改時刷新它

”

我們將從最明顯的部分開始：

• 倉庫列表
• 更新倉庫列表的函數(shù)
• 返回列表和函數(shù)，以便其他組件選項可以訪問它們

//?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ā)點，但它還不能工作，因為我們的 repositories 變量是非響應式的。這意味著從用戶的角度來看，倉庫列表將保持為空。我們來解決這個問題！

帶 ref 的響應式變量

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

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

總結(jié)

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

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