🗒️Vue3小技巧-业务逻辑Hooks封装
2023-1-4
| 2024-3-22
0  |  阅读时长 0 分钟
date
icon
password
description
permalink
categories
type
status
slug
summary
tags
category
updated
Mar 22, 2024 09:10 AM

前言

随着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 来获取并缓存一个远程数据。你可以这样写:
这样,你就可以在多个组件中复用获取远程数据的逻辑了。
 
  • Vue
  • 如何优雅的给新版QQ和微信双开(Mac)CSS3小问题-子元素设置margin-top为什么影响了父元素
    • Waline
    目录