前言

组合式 (Composition) API
的一大特点是“非常灵活”，但也因为非常灵活，每个开发都有自己的想法。加上项目的持续迭代导致我们的代码变得愈发混乱，最终到达无法维护的地步。本文是我这几年使用组合式API的一些经验总结，希望通过本文让你也能够写出
易维护
、
优雅
的
组合式API
代码。

欧阳写了一本开源电子书
vue3编译原理揭秘
，这本书初中级前端能看懂。完全免费，只求一个star。

选项式API

vue2的选项式API因为每个选项都有固定的书写位置（比如数据就放在
data
里面，方法就放在
methods
里面），所以我们只需要将代码放到对应的选项中就行了。

优点是因为已经固定了每个代码的书写位置，所有人写出来的代码风格都差不多。

缺点是当单个组件的逻辑复杂到一定程度时，代码就会显得特别笨重，非常不灵活。

随意的写组合式API

vue3推出了
组合式 (Composition) API
，他的主要特点就是非常灵活。解决了选项式API不够灵活的问题。但是灵活也是一把双刃剑，因为每个开发的编码水平不同。所以就出现了有的人使用组合式 (Composition) API写出来的代码非常漂亮和易维护，有的人写的代码确实很混乱和难易维护。

比如一个组件开始的时候还是规规矩矩的写，所有的
ref
响应式变量放在一块，所有的方法放在一块，所有的
computed
计算属性放在一块。

但是随着项目的不断迭代 ，或者干脆是换了一个人来维护。这时的代码可能就不是最开始那样清晰了，比如新加的代码不管是
ref
、
computed
还是方法都放到一起去了。如下图：

只有
count1
和
count2
时，代码看着还挺整齐的。但是随着
count3
的代码加入后看着就比较凌乱了，后续如果再加
count4
的代码就会更加乱了。

有序的写组合式API

为了解决上面的问题，所以我们约定了一个代码规范。同一种API的代码全部写在一个地方，比如所有的
props
放在一块、所有的
emits
放在一块、所有的
computed
放在一块。并且这些模块的代码都按照约定的顺序去写，如下图：

随着vue组件的代码增加，上面的方案又有新的问题了。

还是前面的那个例子比如有5个
count
的
ref
变量，对应的
computed
和
methods
也有5个。此时我们的vue组件代码量就很多了，比如此时我想看看
computed1
和
increment1
的逻辑是怎么样的。

因为
computed1
和
increment1
函数分别在文件的
computed
和
methods
的代码块处，
computed1
和
increment1
之间隔了几十行代码，看完
computed1
的代码再跳转去看
increment1
的代码就很痛苦。如下图：

这时有小伙伴会说，抽成
hooks
呗。这里有5个
count
，那么就抽5个
hooks
文件。像这样的代码。如下图：

一般来说抽取出来的
hooks
都是用来多个组件进行逻辑共享，但是我们这里抽取出来的
useCount
文件明显只有这个vue组件会用他。达不到逻辑共享的目的，所以单独将这些逻辑抽取成名为
useCount
的
hooks
文件又有点不合适。

最终解决方案

我们不如将前面的方案进行融合一下，抽取出多个
useCount
函数放在当前vue组件内，而不是抽成单个
hooks
文件。并且在多个
useCount
函数中我们还是按照前面约定的规范，按照顺序去写
ref
变量、
computed
、函数的代码。

最终得出的最佳实践如下图：

上面这种写法有几个优势：

• 我们将每个
  count
  的逻辑都抽取成单独的
  useCount
  函数，并且这些函数都在当前vue文件中，没有将其抽取成
  hooks
  文件。如果哪天
  useCount1
  中的逻辑需要给其他组件使用，我们只需要新建一个
  useCount
  文件，然后直接将
  useCount1
  函数的代码移到新建的文件中就可以了。

• 如果我们想查看
  doubleCount1
  和
  increment1
  中的逻辑，只需要找到
  useCount1
  函数，关于
  count1
  相关的逻辑都在这个函数里面，无需像之前那样翻山越岭跨越几十行代码才能从
  doubleCount1
  的代码跳转到
  increment1
  的代码。

总结

本文介绍了使用
Composition API
的最佳实践，规则如下：

• 首先约定了一个代码规范，
  Composition API
  按照约定的顺序进行书写（书写顺序可以按照公司代码规范适当调整）。并且同一种组合式API的代码全部写在一个地方，比如所有的
  props
  放在一块、所有的
  emits
  放在一块、所有的
  computed
  放在一块。

• 如果逻辑能够多个组件复用就抽取成单独的
  hooks
  文件。

• 如果逻辑不能给多个组件复用，就将逻辑抽取成
  useXXX
  函数，将
  useXXX
  函数的代码还是放到当前组件中。

  第一个好处是如果某天
  useXXX
  函数中的逻辑需要给其他组件复用，我们只需要将
  useXXX
  函数的代码移到新建的
  hooks
  文件中即可。

  第二个好处是我们想查看某个业务逻辑的代码，只需要在对应的
  useXXX
  函数中去找即可。无需在整个vue文件中翻山越岭从
  computed
  模块的代码跳转到
  function
  函数的代码。

关注公众号：【前端欧阳】，给自己一个进阶vue的机会

另外欧阳写了一本开源电子书
vue3编译原理揭秘
，这本书初中级前端能看懂。完全免费，只求一个star。