手把手教你封装几个Vue3中很有用的组合式API

来源 | https://www.shymean.com/

本文将介绍如何使用vue3来封装一些比较有用的组合api，主要包括背景、实现思路以及一些思考。

就我自己的感觉而言， Hook 与 Composition API 概念是很类似的，事实上在react大部分可用的Hook都可以使用Vue3再实现一遍。

为了拼写方便，下文内容均使用Hook代替 Composition API 。相关代码均放在 github上面，地址：https://github.com/tangxiangmin/vue3-hook。

1、useRequest

背景

使用hook来封装一组数据的操作是很容易的，例如下面的 useBook

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 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 []
        })
    })
    // ...
}

思考

处理网络请求是前端工作中十分常见的问题，处理上面列举到的加载、错误处理等，还可以包含去抖、节流、轮询等各种情况，还有离开页面时取消未完成的请求等，都是可以在 useRequest 中进一步封装的

useEventBus

EventBus在多个组件之间进行事件通知的场景下还是比较有用的，通过监听事件和触发事件，可以在订阅者和发布者之间解耦，实现一个常规的eventBus也比较简单。

// 事件总线，全局单例
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()
    // 劫持两个监听方法，收集当前组件对应的事件
    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 时手动取消要方便很多。

思考

这个思路可以运用在很多需要在组件卸载时执行清理操作的逻辑，比如：

dom事件注册 addEventListener 和 removeEventListener。

计时器 setTimeout 和 clearTimeout。

网络请求 request 和 abort。

从这个封装也可以看见组合API一个非常明显的优势：尽可能地抽象公共逻辑，而无需关注每个组件具体的细节。

useModel

背景

当掌握了Hook（或者Composition API）之后，感觉万物皆可hook，总是想把数据和操作这堆数据的方法封装在一起，比如下面的计数器。

import {createStore} from 'vuex'


const store = createStore({
    state: {
        count: 0
    },
    mutations: {
        setCount(state, payload) {
            state.count = payload
        }
    }
})

然后重新实现 useCounter。

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。

function reducer(state, action){
    // 根据action进行处理
    // 返回新的state
}
const initialState = {}
const {state, dispatch} = useReducer(reducer, initialState);

实现

借助于Vue的数据响应系统，我们甚至不需要实现任何发布和订阅逻辑。

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

看起来跟我们上面 useModel 的例子并没有什么区别，主要是暴露了通用的 dispatch 方法，在reducer处维护状态变化的逻辑，而不是在每个useCounter中自己维护修改数据的逻辑。

思考

当然这个redux是非常简陋的，包括中间件、 combineReducers 、 connect 等方法均为实现，但也为我们展示了一个最基本的redux数据流转过程。

useDebounce与useThrottle

背景

前端很多业务场景下都需要处理节流或去抖的场景，节流函数和去抖函数本身没有减少事件的触发次数，而是控制事件处理函数的执行来减少实际逻辑处理过程，从而提高浏览器性能。

一个去抖的场景是：在搜索框中根据用户输入的文本搜索关联的内容并下拉展示，由于input是一个触发频率很高的事件，一般需要等到用户停止输出文本一段时间后才开始请求接口查询数据。

先来实现最原始的业务逻辑。

与 useApi 同理，我们可以将这个debounce的逻辑抽象出来，，封装成一个通用的 useDebounce。

实现useDebounce

貌似不需要我们再额外编写任何代码，直接将 debounce 方法重命名为 useDebounce 即可，为了凑字数，我们还是改装一下，同时增加cancel方法。

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
        }
    }
}

思考

从去抖/节流的形式可以看出，某些hook与我们之前的工具函数并没有十分明显的边界。是将所有代码统一hook化，还是保留原来引入工具函数的风格，这是一个需要思考和实践的问题。

总结

本文主要展示了几种Hook的封装思路和简单实现。

useRequest 用于统一管理网络请求相关状态，而无需在每次网络请求中重复处理loading、error等逻辑。

useEventBus 实现了在组件卸载时自动取消当前组件监听的事件，无需重复编写 onUnmounted 代码，这个思路也可以用于DOM事件、定时器、网络请求等注册和取消。

useModel 实现了在多个组件共享同一个hook状态，展示了一种除vuex、 provide/inject 函数之外跨组件共享数据的方案。

useReducer
redux
useModel

useDebounce 与 useThrottle ，实现了去抖和节流，并思考了hook化的代码风格与常规的util代码风格，以及是否有必要将所有的东西都hook化。

学习更多技能

请点击下方公众号