封装几个Vue3中很有用的组合式API

Posted 2023-03-30

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

其中封装了获取资源、处理加载状态等逻辑，看起来貌似能满足我们的需求了

缺点在于对应另外一个资源而言，我们貌似还需要写类似的模板代码，因此可以将这一堆代码进行抽象，封装成 useApi 方法

然后修改上面的 useBook 方法

注意这是一个非常通用的方法，假设现在需求封装其他的请求，处理起来也是非常方便的，不需要再一遍遍地处理loading和error等标志量

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

我们在组件初始化时监听事件，在交互时触发事件，这些是很容易理解的；但很容易被遗忘的是，我们还需要在组件卸载时取消事件注册，释放相关的资源。

因此可以封装一个 useEventBus 接口，统一处理这些逻辑

既然要在组件卸载时取消注册的相关事件，简单的实现思路是：只要在注册时( on 和 once )收集相关的事件和处理函数，然后在 onUnmounted 的时候取消( off )收集到的这些事件即可

因此我们可以劫持事件注册的方法，同时额外创建一个 eventMap 用于收集使用当前接口注册的事件

这样，当组价卸载时也会通过 instance.clear 移除该组件注册的相关事件，比起手动在每个组件 onUnmounted 时手动取消要方便很多。

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

参考：

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

这个 useCounter 暴露了获取当前数值count、增加数值decrement和减少数值increment等数据和方法，然后就可以在各个组件中愉快地实现计数器了

在某些场景下我们希望多个组件可以共享同一个计数器，而不是每个组件自己独立的计数器。

一种情况是使用诸如vuex等全局状态管理工具，然后修改 useCounter 的实现

然后重新实现 useCounter

很显然，现在的 useCounter2 仅仅只是store的 state 与 mutations 的封装，直接在组件中使用store也可以达到相同的效果，封装就变得意义不大；此外，如果单单只是为了这个功能就为项目增加了vuex依赖，显得十分笨重。

基于这些问题，我们可以使用一个 useModel 来实现复用某个钩子状态的需求

整个思路也比较简单，使用一个Map来保存某个hook的状态

然后包装一下 useCounter

这样，在每次调用 useCounter3 时，都返回的是同一个状态，也就实现了多个组件之间的hook状态共享。

userModel 提供了一种除 vuex 和 provide()/inject() 之外共享数据状态的思路，并且可以很灵活的管理数据与操作数据的方案，而无需将所有state放在一起或者模块下面。

缺点在于，当不使用 useModel 包装时， useCounter 就是一个普通的hook，后期维护而言，我们很难判断某个状态到底是全局共享的数据还是局部的数据。

因此在使用 useModel 处理hook的共享状态时，还要要慎重考虑一下到底合不合适。

redux的思想可以简单概括为

我们甚至可以将redux的使用hook化，类似于

然后实现一个 useRedux 负责传递 reducer 和 action

我们希望是维护一个全局的store，因此可以使用上面的 useModel

然后就可以在组件中使用了

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

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

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

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

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

然后在视图中引入

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

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

节流与去抖的封装方式基本相同，只要知道 throttle 的实现就可以了。

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