【vue3|第14期】深入Vue3自定义Hooks:掌握组件逻辑复用的核心

日期: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> 组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^


文章目录



一、前言

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,可以封装计数器的状态和行为。
  • 数据处理 :例如,编写一个 useFetchDataHook 来处理 API 请求,获取数据并更新组件状态。
  • 副作用管理 :创建一个处理订阅事件的 Hook,确保在组件卸载时清除事件监听器。
  • 表单处理 :编写处理表单验证和提交逻辑的 Hooks

2、Hooks的应用场景

  • 逻辑复用:在不同组件间共享相同的业务逻辑。
  • 逻辑拆分:将大型组件的逻辑拆分成易于管理和复用的小块。
  • 副作用管理:确保如定时器、事件监听等在组件卸载时得到正确处理。

五、vue3 Hooks优缺点

1、vue3 Hooks优点:

  • 提高代码复用性和可维护性:通过复用组件逻辑,减少代码冗余,提高代码可维护性。
  • 解耦组件:降低组件间的耦合,提高代码可维护性。
  • 提高开发效率:复用和解耦可以让开发者更快地开发和维护组件。

2、vue3 Hooks缺点:

  • 学习成本 :初学者可能需要一定时间来理解和掌握 Hooks 的使用。
  • 过度使用 :如果过度使用 Hooks,可能会导致代码变得复杂,降低开发效率。
  • 代码质量 :第三方 Hooks 质量和兼容性参差不齐。

六、Hooks书写规范

在编写 Hooks 时,建议遵循以下规范:

  • 命名规范 :以"use"开头,描述 Hooks 的功能易于理解:命名应清晰明了,让人一眼就能了解 Hooks 的作用,如 useMonsePositionuseCounter 以及 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

相关推荐
2401_882727578 分钟前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
会发光的猪。42 分钟前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客1 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记1 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安1 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼1 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
周全全1 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ2 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue