vue composition-api 封裝組合式函數(shù)的操作方法
介紹
在 Vue 應用的概念中,“組合式函數(shù)”(Composables) 是一個利用 Vue 的組合式 API 來封裝和復用有狀態(tài)邏輯的函數(shù)。
Composables 函數(shù)就是利用 Vue3 提出的 Composition API ,封裝出的一些可以復用的組合式函數(shù),目前 Vue2 也可以使用(2.7 版本可以直接使用,2.6 需要引入另外composition-api的插件)。還沒寫過這種風格代碼的同學,可以先看引用的官方文檔的兩個鏈接,介紹的比較詳細。
下面我簡單介紹一下: 組合式 API 的靈感來自Hooks,也是目前流行的函數(shù)式編程的思想,便于邏輯復用、測試以及類型推導,編寫Vue業(yè)務代碼的時候會更加的靈活。但組合式 API 不等于函數(shù)式編程,組合式 API 的特點是基于Vue數(shù)據(jù)響應系統(tǒng)的,而函數(shù)式編程通常強調(diào)數(shù)據(jù)不可變的。 組合式API 包括:
- 響應式相關(guān)(ref、reactive、computed、watch 等)
- 生命周期鉤子(onMounted 和 onUnmounted 等)
- provide、inject 等
一個簡單的組合式函數(shù)示例和使用:
import { computed } from 'vue' export function useAdd(a,b) { return computed(() => a.value + b.value) }
import { ref } from 'vue' import { useAdd } from './add.js const a = ref(1) const b = ref(2) const c = useAdd(a,b)
最佳實踐
像寫工具函數(shù)一樣,組合式函數(shù)也要設(shè)計好函數(shù)的接口,設(shè)計函數(shù)入?yún)⒌念愋鸵约澳J值和返回值是什么樣,以及后期的可擴展性。
1. options對象化
編寫組合式函數(shù)時如果傳入一些配置參數(shù),可以把配置參數(shù)設(shè)計為 options 對象,好處就是不需要記住參數(shù)的位置,以及方便后期的擴展,可通過 TS 類型提示。如 Lodash 的防抖節(jié)流函數(shù),配置項也是放在 options 對象里的。 函數(shù)內(nèi)部實現(xiàn)通過解構(gòu)獲取 options 的配置項,可以賦值默認值
export function useTitle(newTitle = null, options = {}) { const { document = defaultDocument, observe = false, titleTemplate = '%s', } = options // ... }
2. 動態(tài)返回
通過 options 的配置項,可以動態(tài)返回不同的值
export default useNow(options) { const { controls = false } = options; // ... if (!controls) { return value; } else { return { value, controlAction1, controlAction2 }; } }
如:useNow vueuse.org/core/useNow…
import { useNow } from '@vueuse/core' const now = useNow() // 返回控制暫停/恢復的函數(shù) const { now, pause, resume } = useNow({ controls: true })
3. 靈活地使用ref
入?yún)⒃谑褂玫倪^程中可能是普通類型或 ref 類型:
type MaybeRef<T> = Ref<T> | T
如果函數(shù)內(nèi)部期待入?yún)⑹瞧胀愋停鞘褂谜呖赡軅魅腠憫降?Ref 類型,可以使用 unref 函數(shù)獲取值,兼容 ref類型:
import { unref } from 'vue' function useFeature(maybeRef) { const value = unref(maybeRef) //... }
unref 的實現(xiàn):
function unref <T> (r:Ref<T>|T): T) { return isRef(r) ? r.value : r }
如果函數(shù)內(nèi)部入?yún)⑹?ref 類型的,可以再使用 ref 函數(shù)包裹,該函數(shù)如果傳入一個ref類型的參數(shù)會原樣返回。
import { ref, watch } from 'vue' export function useTitle(newTitle) { const title = ref(newTitle || document.title) watch(title, (t) => { if (t != null) document.title = t}, { immediate: true } ) return title }
4. 異步變同步
通過響應式數(shù)據(jù)的連接,不必使用await,在等待異步請求返回后將數(shù)據(jù)進行更新。如:
const { res } = useFetch('https://xxx.com/').json() const data = computed(() => res.value?.data)
import { shallowRef } from 'vue' export function useFetch<>(url) { const data = shallowRef(null) const error = shallowRef(null) fetch(unref(url)).then(r => r.json()) .then(r => data.value = r) .catch(e => error.value = e) return { data, error } }
5. 簡單的狀態(tài)管理
由于響應性系統(tǒng)與組件層是解耦的,簡單的場景下我們可以使用 reactive 創(chuàng)建一個響應式對象,在多個組件實例間共享數(shù)據(jù)。
// store.js import { reactive } from 'vue' export const store = reactive({ a: 0, b: 1 })
復雜場景則需要使用 pinia 進行狀態(tài)管理
參考資料
到此這篇關(guān)于vue composition-api 封裝組合式函數(shù)的操作方法的文章就介紹到這了,更多相關(guān)vue composition-api 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push)
這篇文章主要介紹了vue3.0?router路由跳轉(zhuǎn)傳參問題(router.push),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08Nuxt引用cookie-universal-nuxt在服務端請求cookie方式
這篇文章主要介紹了Nuxt引用cookie-universal-nuxt在服務端請求cookie方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10一文帶你了解什么是Vue的前端微服務架構(gòu)(Micro Frontends)
微前端架構(gòu)是一種將大型前端應用拆分為多個小型、獨立的前端應用的架構(gòu)風格,每個小型前端應用都可以獨立部署、獨立開發(fā)和獨立運行,下面我們就來學習一下它的相關(guān)使用吧2023-11-11