Vue3小技巧-业务逻辑Hooks封装

date

Apr 8, 2023 01:56 AM

type

status

slug

summary

随着Vue更新到3.x版本，出现了一个新的代码组织方式-组合式API。以前Vue2.x到代码书写风格是选项式 API。

但是在实际代码编写过程中，组合式API一大坨代码都放在一起。不利于后期代码维护，本人小菜鸟一枚就思考是否有什么设计模式或者什么解决的方法。一开始采用的就是普通的分函数这种，但是后面觉得维护起来也很麻烦，问了大佬之后总结出一部分经验。

在开始Hooks这种方式之前，了解下什么是有状态函数和无状态函数。这对后面Hooks编写有很大的帮助。

举个例子，假设你有一个计数器函数，它会记录它被调用了多少次。这个函数就是一个有状态函数，因为它的行为取决于它的内部状态（即计数器的当前值）。

这个函数的定义包含一个匿名函数，它使用闭包来访问外层函数的变量 count。在调用 counter() 时，它会创建一个新的 count 变量并返回这个匿名函数的引用。每次调用这个匿名函数时，它会增加 count 的值并返回当前的 count 值。这就是一个有状态函数的例子。

无状态函数是指不依赖于任何外部状态的函数。这种函数的输出只与它的输入有关，并且没有任何内部状态需要保存。无状态函数通常更容易测试和维护，因为它们不会受到外部环境的干扰。

例如，下面是一个无状态函数的例子，它接受两个数字并返回它们的和：

这个函数的输出完全取决于它的输入，并且没有任何内部状态需要保存。因此，这是一个无状态函数。

### 业务逻辑Hooks封装

Vue 3 中的 Hooks 是一种新的方式来组织和复用代码。它们可以让你在组件之间复用状态逻辑，而不必使用类组件。

要把业务封装成 Hook，你需要定义一个函数，这个函数可以使用 Vue 3 中的内置 Hooks（如 ref 和 computed）来处理状态和副作用。这里就用到了`有状态函数`。

例如，假设你要封装一个 Hook 来获取并缓存一个远程数据。你可以这样写：

这样，你就可以在多个组件中复用获取远程数据的逻辑了。