建站
咨詢
售后
建站咨詢
新聞中心
本文將介紹如何使用Vue3來封裝一些比較有用的組合API，主要包括背景、實現(xiàn)思路以及一些思考。
成都創(chuàng)新互聯(lián)公司主營無極網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,APP應用開發(fā),無極h5小程序開發(fā)搭建,無極網(wǎng)站營銷推廣歡迎無極等地區(qū)企業(yè)咨詢
就我自己的感覺而言，Hook與Composition API概念是很類似的，事實上在React大部分可用的Hook都可以使用Vue3再實現(xiàn)一遍。
為了拼寫方便，下文內容均使用Hook代替Composition API。相關代碼均放在 ??github??上面。
useRequest
背景
使用hook來封裝一組數(shù)據(jù)的操作是很容易的，例如下面的useBook：
import {ref, onMounted} from 'vue'
function fetchBookList() {
return new Promise((resolve) => {
setTimeout(() => {
resolve([1, 2, 3])
}, 1000)
})
}
export function useBook() {
const list = ref([])
const loading = ref(false)
const getList = async () => {
loading.value = true
const data = await fetchBookList({page: 1})
loading.value = false
list.value = data
}
onMounted(() => {
getList()
})
return {
list,
loading,
getList
}
}其中封裝了獲取資源、處理加載狀態(tài)等邏輯，看起來貌似能滿足我們的需求了。
缺點在于對應另外一個資源而言，我們貌似還需要寫類似的模板代碼，因此可以將這一堆代碼進行抽象，封裝成??useApi??方法。
實現(xiàn)
function useApi(api) {
const loading = ref(false)
const result = ref(null)
const error = ref(null)
const fetchResource = (params) => {
loading.value = true
return api(params).then(data => {
// 按照約定，api返回的結果直接復制給result
result.value = data
}).catch(e => {
error.value = e
}).finally(() => {
loading.value = false
})
}
return {
loading,
error,
result,
fetchResource
}
}然后修改上面的useBook方法：
function useBook2() {
const {loading, error, result, fetchResource,} = useApi(fetchBookList)
onMounted(() => {
fetchResource({page: 1})
})
return {
loading,
error,
list: result
}
}注意這是一個非常通用的方法，假設現(xiàn)在需求封裝其他的請求，處理起來也是非常方便的，不需要再一遍遍地處理loading和error等標志量：
function fetchUserList() {
return new Promise((resolve) => {
setTimeout(() => {
const payload = {
code: 200,
data: [11, 22, 33],
msg: 'success'
}
resolve(payload)
}, 1000)
})
}
function useUser() {
const {loading, error, result, fetchResource,} = useApi((params) => {
// 封裝請求返回值
return fetchUserList(params).then(res => {
console.log(res)
if (res.code === 200) {
return res.data
}
return []
})
})
// ...
}
思考
處理網(wǎng)絡請求是前端工作中十分常見的問題，處理上面列舉到的加載、錯誤處理等，還可以包含去抖、節(jié)流、輪詢等各種情況，還有離開頁面時取消未完成的請求等，都是可以在useRequest中進一步封裝的。
2. useEventBus
EventBus在多個組件之間進行事件通知的場景下還是比較有用的，通過監(jiān)聽事件和觸發(fā)事件，可以在訂閱者和發(fā)布者之間解耦，實現(xiàn)一個常規(guī)的eventBus也比較簡單：
class EventBus {
constructor() {
this.eventMap = new Map()
}
on(key, cb) {
let handlers = this.eventMap.get(key)
if (!handlers) {
handlers = []
}
handlers.push(cb)
this.eventMap.set(key, handlers)
}
off(key, cb) {
const handlers = this.eventMap.get(key)
if (!handlers) return
if (cb) {
const idx = handlers.indexOf(cb)
idx > -1 && handlers.splice(idx, 1)
this.eventMap.set(key, handlers)
} else {
this.eventMap.delete(key)
}
}
once(key, cb) {
const handlers = [(payload) => {
cb(payload)
this.off(key)
}]
this.eventMap.set(key, handlers)
}
emit(key, payload) {
const handlers = this.eventMap.get(key)
if (!Array.isArray(handlers)) return
handlers.forEach(handler => {
handler(payload)
})
}
}我們在組件初始化時監(jiān)聽事件，在交互時觸發(fā)事件，這些是很容易理解的；但很容易被遺忘的是，我們還需要在組件卸載時取消事件注冊，釋放相關的資源。
因此可以封裝一個useEventBus接口，統(tǒng)一處理這些邏輯。
實現(xiàn)
既然要在組件卸載時取消注冊的相關事件，簡單的實現(xiàn)思路是：只要在注冊時(on和once)收集相關的事件和處理函數(shù)，然后在onUnmounted的時候取消(off)收集到的這些事件即可。
因此我們可以劫持事件注冊的方法，同時額外創(chuàng)建一個eventMap用于收集使用當前接口注冊的事件：
// 事件總線，全局單例
const bus = new EventBus()
export default function useEventBus() {
let instance = {
eventMap: new Map(),
// 復用eventBus事件收集相關邏輯
on: bus.on,
once: bus.once,
// 清空eventMap
clear() {
this.eventMap.forEach((list, key) => {
list.forEach(cb => {
bus.off(key, cb)
})
})
eventMap.clear()
}
}
let eventMap = new Map()
// 劫持兩個監(jiān)聽方法，收集當前組件對應的事件
const on = (key, cb) => {
instance.on(key, cb)
bus.on(key, cb)
}
const once = (key, cb) => {
instance.once(key, cb)
bus.once(key, cb)
}
// 組件卸載時取消相關的事件
onUnmounted(() => {
instance.clear()
})
return {
on,
once,
off: bus.off.bind(bus),
emit: bus.emit.bind(bus)
}
}
這樣，當組價卸載時也會通過instance.clear移除該組件注冊的相關事件，比起手動在每個組件onUnmounted時手動取消要方便很多。
思考
這個思路可以運用在很多需要在組件卸載時執(zhí)行清理操作的邏輯，比如：
- DOM事件注冊addEventListener和removeEventListener
- 計時器setTimeout和clearTimeout
- 網(wǎng)絡請求request和abort
從這個封裝也可以看見組合API一個非常明顯的優(yōu)勢：盡可能地抽象公共邏輯，而無需關注每個組件具體的細節(jié)。
3. useModel
參考：??hox源碼??
背景
當掌握了Hook（或者Composition API）之后，感覺萬物皆可hook，總是想把數(shù)據(jù)和操作這堆數(shù)據(jù)的方法封裝在一起，比如下面的計數(shù)器：
function useCounter() {
const count = ref(0)
const decrement = () => {
count.value--
}
const increment = () => {
count.value++
}
return {
count,
decrement,
increment
}
}這個useCounter暴露了獲取當前數(shù)值count、增加數(shù)值decrement和減少數(shù)值increment等數(shù)據(jù)和方法，然后就可以在各個組件中愉快地實現(xiàn)計數(shù)器了。
在某些場景下我們希望多個組件可以共享同一個計數(shù)器，而不是每個組件自己獨立的計數(shù)器。
一種情況是使用諸如vuex等全局狀態(tài)管理工具，然后修改useCounter的實現(xiàn)：
import {createStore} from 'vuex'
const store = createStore({
state: {
count: 0
},
mutations: {
setCount(state, payload) {
state.count = payload
}
}
})然后重新實現(xiàn)useCounter：
export function useCounter2() {
const count = computed(() => {
return store.state.count
})
const decrement = () => {
store.commit('setCount', count.value + 1)
}
const increment = () => {
store.commit('setCount', count.value + 1)
}
return {
count,
decrement,
increment
}
}很顯然，現(xiàn)在的useCounter2?僅僅只是store的state與mutations的封裝，直接在組件中使用store也可以達到相同的效果，封裝就變得意義不大；此外，如果單單只是為了這個功能就為項目增加了vuex依賴，顯得十分笨重。
基于這些問題，我們可以使用一個useModel來實現(xiàn)復用某個鉤子狀態(tài)的需求。
實現(xiàn)
整個思路也比較簡單，使用一個Map來保存某個hook的狀態(tài)：
const map = new WeakMap()
export default function useModel(hook) {
if (!map.get(hook)) {
let ans = hook()
map.set(hook, ans)
}
return map.get(hook)
}
然后包裝一下useCounter：
export function useCounter3() {
return useModel(useCounter)
}
// 在多個組件調用
const {count, decrement, increment} = useCounter3()
// ...
const {count, decrement, increment} = useCounter3()這樣，在每次調用??useCounter3??時，都返回的是同一個狀態(tài)，也就實現(xiàn)了多個組件之間的hook狀態(tài)共享。
思考
userModel?提供了一種除vuex和provide()/inject()之外共享數(shù)據(jù)狀態(tài)的思路，并且可以很靈活的管理數(shù)據(jù)與操作數(shù)據(jù)的方案，而無需將所有state放在一起或者模塊下面。
缺點在于，當不使用useModel?包裝時，useCounter就是一個普通的hook，后期維護而言，我們很難判斷某個狀態(tài)到底是全局共享的數(shù)據(jù)還是局部的數(shù)據(jù)。
因此在使用useModel處理hook的共享狀態(tài)時，還要要慎重考慮一下到底合不合適。
4. useReducer
redux的思想可以簡單概括為：
- store維護全局的state數(shù)據(jù)狀態(tài)，
- 各個組件可以按需使用state中的數(shù)據(jù)，并監(jiān)聽state的變化
- reducer?接收action并返回新的state，組件可以通過dispatch傳遞action觸發(fā)reducer
- state更新后，通知相關依賴更新數(shù)據(jù)
我們甚至可以將redux的使用hook化，類似于：
function reducer(state, action){
// 根據(jù)action進行處理
// 返回新的state
}
const initialState = {}
const {state, dispatch} = useReducer(reducer, initialState);
實現(xiàn)
借助于Vue的數(shù)據(jù)響應系統(tǒng)，我們甚至不需要實現(xiàn)任何發(fā)布和訂閱邏輯：
import {ref} from 'vue'
export default function useReducer(reducer, initialState = {}) {
const state = ref(initialState)
// 約定action格式為 {type:string, payload: any}
const dispatch = (action) => {
state.value = reducer(state.value, action)
}
return {
state,
dispatch
}
}然后實現(xiàn)一個useRedux?負責傳遞reducer和action：
import useReducer from './index'
function reducer(state, action) {
switch (action.type) {
case "reset":
return initialState;
case "increment":
return {count: state.count + 1};
case "decrement":
return {count: state.count - 1};
}
}
function useStore() {
return useReducer(reducer, initialState);
}
我們希望是維護一個全局的store，因此可以使用上面的useModel：
export function useRedux() {
return useModel(useStore);
}然后就可以在組件中使用了：
{{ state.count }}
看起來跟我們上面??useModel???的例子并沒有什么區(qū)別，主要是暴露了通用的??dispatch??方法，在reducer處維護狀態(tài)變化的邏輯，而不是在每個useCounter中自己維護修改數(shù)據(jù)的邏輯。
思考
當然這個redux是非常簡陋的，包括中間件、??combineReducers???、??connect??等方法均為實現(xiàn)，但也為我們展示了一個最基本的redux數(shù)據(jù)流轉過程。
5. useDebounce與useThrottle
背景
前端很多業(yè)務場景下都需要處理節(jié)流或去抖的場景，節(jié)流函數(shù)和去抖函數(shù)本身沒有減少事件的觸發(fā)次數(shù)，而是控制事件處理函數(shù)的執(zhí)行來減少實際邏輯處理過程，從而提高瀏覽器性能。
一個去抖的場景是：在搜索框中根據(jù)用戶輸入的文本搜索關聯(lián)的內容并下拉展示，由于input是一個觸發(fā)頻率很高的事件，一般需要等到用戶停止輸出文本一段時間后才開始請求接口查詢數(shù)據(jù)。
先來實現(xiàn)最原始的業(yè)務邏輯：
import {ref, watch} from 'vue'
function debounce(cb, delay = 100) {
let timer
return function () {
clearTimeout(timer)
let args = arguments,
context = this
timer = setTimeout(() => {
cb.apply(context, args)
}, delay)
}
}
export function useAssociateSearch() {
const keyword = ref('')
const search = () => {
console.log('search...', keyword.value)
// mock 請求接口獲取數(shù)據(jù)
}
// watch(keyword, search) // 原始邏輯，每次變化都請求
watch(keyword, debounce(search, 1000)) // 去抖，停止操作1秒后再請求
return {
keyword
}
}然后在視圖中引入：
與useApi?同理，我們可以將這個debounce的邏輯抽象出來，，封裝成一個通用的useDebounce。
實現(xiàn)useDebounce
貌似不需要我們再額外編寫任何代碼，直接將debounce?方法重命名為useDebounce即可，為了湊字數(shù)，我們還是改裝一下，同時增加cancel方法：
export function useDebounce(cb, delay = 100) {
const timer = ref(null)
let handler = function () {
clearTimeout(timer.value)
let args = arguments,
context = this
timer.value = setTimeout(() => {
cb.apply(context, args)
}, delay)
}
const cancel = () => {
clearTimeout(timer)
timer.value = null
}
return {
handler,
cancel
}
}
實現(xiàn)useThrottle
節(jié)流與去抖的封裝方式基本相同，只要知道??throttle??的實現(xiàn)就可以了。
export function useThrottle(cb, duration = 100) {
let start = +new Date()
return function () {
let args = arguments
let context = this
let now = +new Date()
if (now - start >= duration) {
cb.apply(context, args)
start = now
}
}
}
思考
從去抖/節(jié)流的形式可以看出，某些hook與我們之前的工具函數(shù)并沒有十分明顯的邊界。是將所有代碼統(tǒng)一hook化，還是保留原來引入工具函數(shù)的風格，這是一個需要思考和實踐的問題。
小結
本文主要展示了幾種Hook的封裝思路和簡單實現(xiàn)：
- useRequest用于統(tǒng)一管理網(wǎng)絡請求相關狀態(tài)，而無需在每次網(wǎng)絡請求中重復處理loading、error等邏輯
- useEventBus?實現(xiàn)了在組件卸載時自動取消當前組件監(jiān)聽的事件，無需重復編寫onUnmounted代碼，這個思路也可以用于DOM事件、定時器、網(wǎng)絡請求等注冊和取消
- useModel?實現(xiàn)了在多個組件共享同一個hook狀態(tài)，展示了一種除vuex、provide/inject函數(shù)之外跨組件共享數(shù)據(jù)的方案
- useReducer?利用hook實現(xiàn)了一個簡易版的redux?，并且利用useModel實現(xiàn)了全局的store
- useDebounce與useThrottle，實現(xiàn)了去抖和節(jié)流，并思考了hook化的代碼風格與常規(guī)的util代碼風格，以及是否有必要將所有的東西都hook化
本文全部代碼均放在??github??上面了，由于只是展示思路，了解組合式API的靈活用法，因此代碼寫的十分簡陋，如果發(fā)現(xiàn)錯誤或有其他想法，歡迎指定并一起討論。
網(wǎng)站名稱：封裝幾個有用的Vue3組合式API
當前鏈接：http://m.5511xx.com/article/dhhphso.html
