date
Apr 8, 2023 01:56 AM
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM
icon
password
前言
随着Vue更新到3.x版本,出现了一个新的代码组织方式-组合式API。以前Vue2.x到代码书写风格是选项式 API。
具体可以去vue官网查看
但是在实际代码编写过程中,组合式API一大坨代码都放在一起。不利于后期代码维护,本人小菜鸟一枚就思考是否有什么设计模式或者什么解决的方法。一开始采用的就是普通的分函数这种,但是后面觉得维护起来也很麻烦,问了大佬之后总结出一部分经验。
有状态函数和无状态函数
在开始Hooks这种方式之前,了解下什么是有状态函数和无状态函数。这对后面Hooks编写有很大的帮助。
有状态函数
举个例子,假设你有一个计数器函数,它会记录它被调用了多少次。这个函数就是一个有状态函数,因为它的行为取决于它的内部状态(即计数器的当前值)。
这个函数的定义包含一个匿名函数,它使用闭包来访问外层函数的变量 count。在调用 counter() 时,它会创建一个新的 count 变量并返回这个匿名函数的引用。每次调用这个匿名函数时,它会增加 count 的值并返回当前的 count 值。这就是一个有状态函数的例子。
无状态函数
无状态函数是指不依赖于任何外部状态的函数。这种函数的输出只与它的输入有关,并且没有任何内部状态需要保存。无状态函数通常更容易测试和维护,因为它们不会受到外部环境的干扰。
例如,下面是一个无状态函数的例子,它接受两个数字并返回它们的和:
这个函数的输出完全取决于它的输入,并且没有任何内部状态需要保存。因此,这是一个无状态函数。
### 业务逻辑Hooks封装
Vue 3 中的 Hooks 是一种新的方式来组织和复用代码。它们可以让你在组件之间复用状态逻辑,而不必使用类组件。
要把业务封装成 Hook,你需要定义一个函数,这个函数可以使用 Vue 3 中的内置 Hooks(如 ref 和 computed)来处理状态和副作用。这里就用到了`有状态函数`。
例如,假设你要封装一个 Hook 来获取并缓存一个远程数据。你可以这样写:
这样,你就可以在多个组件中复用获取远程数据的逻辑了。