日期:2024年6月26日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海......
注释:如果您觉得
有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^1.01^365^ = 37.7834;0.99^365^ = 0.0255
1.02^365^ = 1377.4083;0.98^365^ = 0.0006
说在最前面 :本文vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
文章目录
- 一、前言
- 二、什么是Hooks?
- 三、Hooks的实现原理
- 四、Hooks的作用与应用场景
- [五、vue3 Hooks优缺点](#五、vue3 Hooks优缺点)
-
- [1、vue3 Hooks优点:](#1、vue3 Hooks优点:)
- [2、vue3 Hooks缺点:](#2、vue3 Hooks缺点:)
- 六、Hooks书写规范
- [七、如何定义并使用 vue3 Hooks](#七、如何定义并使用 vue3 Hooks)
-
- 示例一:追踪鼠标位置
- 示例二:计数器
-
- [(2-1) 定义](#(2-1) 定义)
- (2-2)调用
- 八、总结
一、前言
在 Vue3
的世界中,自定义 Hooks
本质上是一段具有复用性的代码 ,为我们带来了更强大的功能 和更优雅的代码组织方式 。它犹如一把锋利的"钩子 ",在组件的构建过程中插入所需的逻辑 。通过 Composition API
提供的灵活 API
设计,自定义 Hooks
能够将组件中的逻辑代码巧妙地包装起来,实现在多个组件之间共享和复用,极大地提升了开发效率和代码的可维护性。
二、什么是Hooks?
Hook
,直译为"钩子 ",是一种设计模式 ,允许我们在不修改组件内部逻辑的情况下,复用组件逻辑。它使得我们可以将组件的某些逻辑提取到单独的函数中,这个函数可以被 其他组件 或 Hooks
调用。
三、Hooks的实现原理
Vue3
的自定义 Hooks
是基于 Composition API
来实现的。这些 Hooks
可以在组件的生命周期的不同阶段被调用,执行特定的任务。本质上,Hooks
是特殊的函数 ,能够在组件的setup
函数中被使用 ,通过导入如 ref
, reactive
, onMounted
等API,来创建和管理响应式数据、处理副作用操作以及绑定生命周期事件。
简单来说,Hooks
是通过一系列的 组合式 API
来实现 状态 和 副作用 的管理 ,使得函数式组件 能够拥有类似类组件的功能。
四、Hooks的作用与应用场景
1、Hooks的作用
- 状态管理 :通过定义状态管理的
Hooks
,如useCounter
,可以封装计数器的状态和行为。 - 数据处理 :例如,编写一个
useFetchData
的Hook
来处理API
请求,获取数据并更新组件状态。 - 副作用管理 :创建一个处理订阅事件的
Hook
,确保在组件卸载时清除事件监听器。 - 表单处理 :编写处理表单验证和提交逻辑的
Hooks
。
2、Hooks的应用场景
- 逻辑复用:在不同组件间共享相同的业务逻辑。
- 逻辑拆分:将大型组件的逻辑拆分成易于管理和复用的小块。
- 副作用管理:确保如定时器、事件监听等在组件卸载时得到正确处理。
五、vue3 Hooks优缺点
1、vue3 Hooks优点:
- 提高代码复用性和可维护性:通过复用组件逻辑,减少代码冗余,提高代码可维护性。
- 解耦组件:降低组件间的耦合,提高代码可维护性。
- 提高开发效率:复用和解耦可以让开发者更快地开发和维护组件。
2、vue3 Hooks缺点:
- 学习成本 :初学者可能需要一定时间来理解和掌握
Hooks
的使用。 - 过度使用 :如果过度使用
Hooks
,可能会导致代码变得复杂,降低开发效率。 - 代码质量 :第三方
Hooks
质量和兼容性参差不齐。
六、Hooks书写规范
在编写 Hooks
时,建议遵循以下规范:
- 命名规范 :以"
use
"开头,描述Hooks
的功能易于理解:命名应清晰明了,让人一眼就能了解Hooks
的作用,如useMonsePosition
、useCounter
以及useFetchData
等。 - 参数和返回值 :
Hooks
的参数和返回值应尽量简单明了,避免复杂的数据结构。 - 单一职责原则 :每个
Hooks
应该只实现一个功能,避免逻辑复杂。 - 副作用管理 :在自定义
Hooks
中,我们需要确保正确地管理副作用操作,如定时器、事件监听等。
七、如何定义并使用 vue3 Hooks
示例一:追踪鼠标位置
(1-1)定义
路径:xxx/sys/hooks/useMonsePosition.js
javascript
// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';
// 本质上导出一个函数
export default function() {
const x = ref(0);
const y = ref(0);
// 业务逻辑
function updatePosition(event) {
x.value = event.clientX;
y.value = event.clientY;
}
//挂载后处理
onMounted(() => {
window.addEventListener('mousemove', updatePosition);
});
//卸载前处理
onUnmounted(() => {
window.removeEventListener('mousemove', updatePosition);
});
// 返回一个对象
return { x, y };
}
(1-2)调用
路径:xxx\sys\App.vue
javascript
// App.vue
<template>
<div>
Mouse position(x,y): ({{ x }},{{ y }})
</div>
</template>
<script setup>
//导入自定义hooks函数
import { useMousePosition } from '@/hooks/useMousePosition';
//调用函数,并解耦接收返回值
const { x, y } = useMousePosition();
</script>
示例二:计数器
(2-1) 定义
路径:xxx/sys/hooks/useCounter.js
javascript
// useCounter.js
import { ref, onMounted } from 'vue';
// 创建自定义Hooks
export default function(initialValue = 0) {
const count = ref(initialValue);
function increment() {
count.value++;
}
function decrement() {
count.value--;
}
onMounted(() => {
// 执行一些操作,例如设置初始值
});
return { count, increment, decrement };
}
(2-2)调用
路径:xxx\sys\App.vue
javascript
// App.vue
<template>
当前数值是:{{ count }}
<button @click="increment">加一</button>
<button @click="decrement">减一</button>
</template>
<script setup>
import useCounter from '@/hooks/useCounter';
const { count,increment,decrement } = useCounter()
</script>
八、总结
自定义Hooks在Vue 3中的应用使得我们能够更加高效地组织和重用组件逻辑,是现代Vue开发的一大利器。尽管存在一定的学习成本,但其带来的好处是显而易见的,为我们提供了一种高效、灵活的方式来构建和组织代码,让我们能够更好地应对各种开发需求
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/139986768