赶上Vue3 Composition函数集这班车

速览

本文主要目的是为了介绍 vue-reuse 仓库，它提供了一个 TS + Composition API、TS + jest以及vuepress的练手机会，也能够在练习的同时产出将来会用得上的Composition函数集。

现有 composition 复用函数的文档地址： xuguo.xyz/vue-reuse/
了解更多： github.com/xus-code/vu…

vue-reuse 在做什么？

reuse顾名思义就是重复使用，而我们的主要目的就是实现逻辑的重复使用。

1. 如何去实现逻辑复用？

在composition API出现后似乎已经迎刃而解，得益于composition API的形态我们能在组件外定义好逻辑在组件内使用，这种松耦合的关系为我们提供了一个更加彻底的解耦视图与逻辑的机会；想象一下如果我们的业务是像如下的代码： Input和List组件已经不再承载逻辑，容器组件和UI组件的划分将更为直接。

回想我们在使用组件库的组件时，由于组件的逻辑是内聚在组件内部的应对一点点需求场景不同时就无从下手只能魔改或者重写，还有在逻辑满足业务需求而组件样式不满足时只能通过复写样式来达到目的的场景；这些在新的API形态下都能得到一定程度的解决。

因为我们已经将逻辑和视图去做解耦了，修改逻辑我们就是在重新组合useXXX函数，修改UI我们就是在基于props预设的接口来做UI组件的接入，如果做好props的适配我们甚至能在相同的useXX逻辑下对接上来自不同组件库的Input和List，这都是松耦合带来的优势；而vue-reuse正是在解决useXXX的问题。

2. vue-reuse是如何在做的？

vue-reuse从一开始的定位就不是只做原子化的函数集，它不仅包含useDebounceRef这类基础的原子型复用函数，更有useVirtualList这样的业务向的复用函数；我们希望实现如下逻辑：

原子型复用函数 ---组合---> 业务向复用函数 ---基于props的对接---> UI组件库

3. 这不本应该这样做吗？

我相信在react-hooks思想深入人心的时间节点上，以composition API与react hooks相似的逻辑复用能力为背景，很多人会想这不本应该这样去做吗？
对，的确如此，而 vue-reuse 也是在顺应这样的趋势，在这基础上将内容做的更加具体而已。

如果写 vue-reuse 能得到什么收获？

相信通过刚刚的问答形式已经将vue-reuse在做什么表述清楚了，我们肯定要考虑如果参与能得到什么样的收获。

1. 首先肯定就是TS + Composition API的练习机会，不同于业务场景在书写复用函数时你需要考虑更多的类型推导问题以及高级类型和类型兼容。

2. TS + jest的测试编写机会，不同于通常每天催促的快速交付场景，在复用函数的实现后我们更多会去考虑如何提高测试覆盖率，这里面可能就包含逻辑测试以及包含 DOM 相关的测试编写。

3. vuepress的文档编写机会，不同于博客的纯文字编写，在书写示例文档时可能会更多考虑如何通过示例表达功能、如何更好的描述返回值和入参等等内容。

4. 简洁实用的gitflow协作开发，在协作开发中能够更多的尝试rebase、pr、review、CI校验等等工作流上的实操。

这仅仅是能获取到的一小部分的收获，在真正的实操中我们会面对更多的问题然后解决它，最重要的是我们得到了vue-reuse这个仓库并且运用到我们的业务场景中去。

我已经有点想进一步了解vue-reuse

如果恰好你想进一步了解vue-reuse甚至有想法想要讨论，你可以通过如下途径来了解这个仓库：

1. 我们提供了一份较为完备的 Readme 能够从中获取一些项目的基础信息以及gitflow规范和开发指南。

2. 我现有的composition复用函数提供了相应的 文档 可以通过示例以及示例代码来了解具体的某个复用函数。

首先感谢能够看到最后的小伙伴，如果你正好觉得vue-reuse还不错或者是你想参与进来练手，可以在评论区留下你的脚印，我会一一回复的。