Vue.js 学习总结(11)—— Vue3 Hook 函数实战总结

前言

在 Vue 3 中,Hook 函数是一种特殊的函数,用于封装可重用的逻辑和状态管理。Hook 函数允许你在 Vue 组件中提取和复用逻辑,而不是将所有逻辑都放在组件的选项对象中。它们可以帮助你更好地组织代码,提高代码的可维护性和可测试性。Hook 函数的特点:

  1. 可重用性:Hook 函数可以在多个组件中重复使用,避免了重复编写相同的逻辑。

  2. 逻辑封装:将特定的逻辑封装在 Hook 函数中,使组件的代码更加清晰和易于理解。

  3. 状态管理:Hook 函数可以用于管理组件的状态,包括响应式数据和副作用。

  4. 测试友好:由于 Hook 函数是独立的函数,可以更容易地进行单元测试。

一、Hook 函数的使用方法

创建 Hook 函数,Hook 函数通常是一个普通的 JavaScript 函数,可以接受参数并返回一个对象或函数。例如,以下是一个简单的 Hook 函数,用于管理一个计数器:

import { reactive, toRefs } from 'vue';export function useCounter(initialValue = 0) {const state = reactive({count: initialValue,});const increment = () => {state.count++;};const decrement = () => {state.count--;};return {...toRefs(state),increment,decrement,};}

二、在组件中使用 Hook 函数

在 Vue 组件中,可以通过导入 Hook 函数并调用它来使用其中的逻辑和状态。例如,以下是一个使用 useCounter Hook 函数的组件:

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div></template><script>import { useCounter } from './hooks/useCounter';export default {setup() {const { count, increment, decrement } = useCounter();return {count,increment,decrement,};},};
</script>

三、Hook 函数的应用场景

  1. 状态管理:Hook 函数可以用于管理组件的状态,例如计数器、表单数据、加载状态等。

  2. 副作用管理:可以使用 Hook 函数来管理副作用,如订阅事件、定时器、异步请求等。

  3. 逻辑复用:将通用的逻辑封装在 Hook 函数中,以便在多个组件中重复使用,例如数据验证、权限检查等。

四、常见的 HOOK 函数案例

一、数据获取 Hook。假设你经常需要在不同组件中进行数据获取操作,可以创建一个数据获取 Hook。

import { ref, onMounted } from 'vue';export function useDataFetch(apiUrl) {const data = ref(null);const loading = ref(true);const error = ref(null);onMounted(async () => {try {const response = await fetch(apiUrl);if (!response.ok) {throw new Error('Network response was not ok');}data.value = await response.json();} catch (err) {error.value = err;} finally {loading.value = false;}});return { data, loading, error };
}

 使用示例:

<template><div v-if="loading">Loading...</div><div v-else-if="error">{{ error.message }}</div><div v-else><!-- 展示获取到的数据 --><p>{{ data.someProperty }}</p></div>
</template><script>
import { useDataFetch } from './yourHooks';export default {setup() {const { data, loading, error } = useDataFetch('https://your-api-url.com/data');return { data, loading, error };},
};
</script>

 二、表单验证 Hook。用于处理表单验证逻辑。

import { ref } from 'vue';export function useFormValidation() {const formData = ref({});const errors = ref({});const validate = () => {// 假设这里进行一些简单的验证,比如检查某个字段是否为空if (!formData.value.username) {errors.value.username = 'Username is required';} else {delete errors.value.username;}// 可以根据实际需求扩展更多验证逻辑return Object.keys(errors.value).length === 0;};return { formData, errors, validate };
}

使用示例:

<template><form @submit.prevent="submitForm"><input v-model="formData.username" /><p v-if="errors.username">{{ errors.username }}</p><button>Submit</button></form>
</template><script>
import { useFormValidation } from './yourHooks';export default {setup() {const { formData, errors, validate } = useFormValidation();const submitForm = () => {if (validate()) {// 处理表单提交逻辑}};return { formData, errors, submitForm };},
};
</script>

三、鼠标位置跟踪 Hook。跟踪鼠标在页面上的位置

 使用示例:

<template><div>Mouse position: {{ x }}, {{ y }}</div>
</template><script>
import { useMousePosition } from './yourHooks';export default {setup() {const { x, y } = useMousePosition();return { x, y };},
};
</script>

五、Vue3 自定义 Hooks 为什么这么好用?

1、组合式 API 和选项 API

Vue2 提供的编程方式是 Options API,即选项式 API。我们需要在 data 里面定义变量,在 methods 里面定义方法,在 computed 定义计算后的逻辑。

图片

在开发功能的时候,我们需要在 data 、methods、computed 之间来回找代码。如果功能非常复杂, data 、methods、computed 等里面的代码就会非常长,不好维护。

图片

后来 Vue3 出现了,它提供的编程方式是 Composition API,即组合式 API。在开发功能的时候,我们根据逻辑功能去组织代码,一个功能所定义的所有 API 会放在一起。

图片

但是如果业务功能太复杂,script 标签里面的代码也会又臭又长,而且并不是很多人都有加注释的习惯,所以时间长了也不好维护。

图片

那能不能把相同逻辑功能的代码分别放到到不同的文件里,其他地方想用的时候直接导入就可以复用了呢?有的,自定义 Hooks 出现了。

2、自定义 Hooks 介绍

Vue 的自定义 Hooks 是一种封装可重用逻辑的方式。它允许你将复杂的逻辑提取出来,形成独立的函数,然后在不同的组件中复用。这样可以避免在多个组件中重复编写相同的逻辑,提高代码的可读性和可维护性。通俗易懂来说就是:

1.将可复用的功能逻辑放到一个 js 文件里面,并通过 export  导出。

2.定义 Hooks 的时候,js 的文件名和方法名通常以 use 开头,例如 useAddOrder、useChangeData。

3.通过 import  导入相关的 js 文件,引用时通过解构显示相关的变量和方法。

3、自定义 Hooks 案例

3.1 案例1

创建一个简单的计数器 Hooks

图片

使用 Hooks

<template><div><p>count: {{ count }}</p><el-divider></el-divider><el-button type="primary" @click="increment">新增</el-button><el-button type="success" @click="decrement">减少</el-button></div>
</template>
<script setup>
// 导入 hooks
import { useCounter } from "../hooks/useCounter";
// 解构引入
const { count, increment, decrement } = useCounter();
</script>

图片

3.2 案例2

创建一个监听浏览器窗口大小变化的 Hooks

图片

使用 Hooks

<template><div><p>浏览器窗口宽度: {{ width }}</p><p>浏览器窗口高度: {{ height }}</p></div>
</template>
<script setup>
// 导入 hooks
import { useWindowResize } from "../hooks/useWindowResize";
// 解构引入
const { width, height } = useWindowResize();
</script>

图片

4、自定义 Hooks 优势

所谓的自定义 Hooks 就是在开发 Vue3 项目时,我们将 script 里面相同逻辑功能的变量和方法等封装到一个 js 文件里面,然后通过 export导出。然后在任何页面都可以通过导入、解构的方式使用,大大提高代码的复用性。自定义 Hooks 将相同的功能代码从一堆代码中解耦出来,让组件结构更清晰,便于维护。

图片

Hooks 直译是“钩子”,所以又把这些定义的 js 叫做钩子函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56989.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Elasticsearch 解析:倒排索引机制/字段类型/语法/常见问题

Elasticsearch 是一个分布式的开源搜索引擎&#xff0c;广泛用于全文搜索、分析和数据存储。它基于 Apache Lucene 构建&#xff0c;支持 RESTful 风格的 API&#xff0c;使得开发者能够高效地存储和检索数据。本文将详细讲解 Elasticsearch 的基本原理&#xff0c;特别是其倒排…

网页上的视频怎么下载下来?三种方法

分享三个简单好用的网页视频下载工具&#xff0c;值得使用&#xff01; 1.IDM IDM 是一款可以提高下载速度达5倍的工具&#xff0c;同时具有恢复、调度和组织下载的功能。如果由于网络问题或意外的电源中断&#xff0c;程序将恢复未完成的下载。 IDM 还具有一个完全功能的站点…

【Flask】一、安装与第一个测试程序

目录 Flask简介 安装Flask 安装pip&#xff08;Python包管理器&#xff09; 使用pip安装Flask 验证安装 创建Flask程序 创建应用 运行 访问测试 Flask简介 Flask是一个用Python编写的轻量级Web应用框架。它被设计为易于使用和扩展&#xff0c;使其成为构建简单网站或复…

【经典论文阅读11】ESMM模型——基于贝叶斯公式的CVR预估

传统的CVR模型&#xff08;也就是直接对conversion rate建模的模型&#xff09;在实际应用中面临两个问题&#xff08;样本选择偏差与数据稀疏性问题&#xff09;。为了解决这两个问题&#xff0c;本文提出ESMM模型。该模型巧妙地利用用户行为序列去建模这个问题&#xff0c;从…

解决SpringBoot项目启动错误:找不到或无法加载主类

如何解决SpringBoot项目的“找不到或无法加载主类”启动错误 在开发SpringBoot应用时&#xff0c;经常可能会遇到一个启动错误&#xff1a;“错误&#xff1a;找不到或无法加载主类 com.example.controller.demo.DemoApplication”。本文将介绍三种解决这一问题的方法。 方法…

微信小程序中点击搜素按钮没有反应,可能是样式问题(按钮被其他元素覆盖或遮挡)

文章目录 1. 确认 bindtap 绑定在正确的元素上2. 检查是否有遮挡或重叠元素3. 检查 this 上下文绑定问题4. 清除微信小程序开发者工具的缓存5. 用微信开发者工具查看事件绑定6. 确保 handleSearch 没有拼写错误进一步调试 1、searchResults.wxml2、searchResults.wxss3、search…

偷懒总结篇|贪心算法|动态规划|单调栈|图论

由于这周来不及了&#xff0c;先过一遍后面的思路&#xff0c;具体实现等下周再开始详细写。 贪心算法 这个图非常好 122.买卖股票的最佳时机 II(妙&#xff0c;拆分利润) 把利润分解为每天为单位的维度&#xff0c;需要收集每天的正利润就可以&#xff0c;收集正利润的区间…

[C高手编程] 进程编程与IPC

&#x1f496;&#x1f496;⚡️⚡️专栏&#xff1a;C高手编程-面试宝典/技术手册/高手进阶⚡️⚡️&#x1f496;&#x1f496; 「C高手编程」专栏融合了作者十多年的C语言开发经验&#xff0c;汇集了从基础到进阶的关键知识点&#xff0c;是不可多得的知识宝典。如果你是即将…

基于SSM+小程序的旅游社交登录管理系统(旅游4)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 ​ 本旅游社交小程序功能有管理员和用户。管理员有个人中心&#xff0c;用户管理&#xff0c;每日签到管理&#xff0c;景点推荐管理&#xff0c;景点分类管理&#xff0c;防疫查询管理&a…

k8s 二进制部署安装(一)

目录 环境准备 初始化操作系统 部署docker 引擎 部署 etcd 集群 准备签发证书环境 部署 Master01 服务器相关组件 apiserver scheduler controller-manager.sh admin etcd 存储了 Kubernetes 集群的所有配置数据和状态信息&#xff0c;包括资源对象、集群配置、元数据…

阿里云镜像源无法访问?使用 DaoCloud 镜像源加速 Docker 下载(Linux 和 Windows 配置指南)

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f343; vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode&#x1f4ab; Gitee &#x1f…

银河麒麟V10系统下libopenblas.so.0和libllmlmf库的安装

1、当前linux服务器系统是银河麒麟V10&#xff0c;具体的内核和cpu型号如下&#xff1a; 2、使用:uname -a来进行查询 Linux localhost.localdomain 4.19.90-89.16.v2401.ky10.x86_64 #1 SMP Sat Sep 14 13:09:47 CST 2024 x86_64 x86_64 x86_64 GNU/Linux 3、在部署QT开发的应…

高清 MV 无字幕视频素材

在当下的短视频和自媒体时代&#xff0c;高清无字幕的视频素材无疑是创作者们的“得力助手”。不管是用于剪辑情感励志视频、制作搞笑段子&#xff0c;还是创作风景航拍视频&#xff0c;优质的素材库都能让你的创作如虎添翼。今天&#xff0c;我就为大家介绍几个海外的高质量素…

如何使用Qlik Sense Util

Qlik Sense Util 是 Qlik Sense 的一个实用工具&#xff0c;它可以帮助管理员执行各种配置和维护任务。 以下是使用 Qlik Sense Util 工具的一些基本步骤&#xff1a; 1. **运行 QlikSenseUtil.exe**&#xff1a; - 在中心节点上&#xff0c;打开文件资源管理器并导航到 C:…

服务器作业2

架设一台NFS服务器&#xff0c;并按照以下要求配置 关闭防火墙 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 配置文件设置&#xff1a; [rootlocalhost ~]# vim /etc/exports 1、开放/nfs/shared目录&#xff0c;供所有用户查询资料 共享…

Scott Brinker:Martech App 的未来在中小企业和中端市场

中端市场营销支出增加 Product Hunt网站上每周发布的与营销技术相关的产品数量和TechCrunch网站上发布的新融资公告数量持续增加。最近&#xff0c;很多公司都在借助OpenAI、Azure和AWS的新API&#xff0c;赶上生成式人工智能的浪潮。可以肯定的是&#xff0c;有很多重复的想法…

IDEA集成AI的DevAssist插件使用指南

DevAssit使用背景&#xff0c;这类工具通常旨在帮助开发者提高效率&#xff0c;简化开发流程。这类工具包括但不限于&#xff1a; 代码编辑器插件&#xff1a;提供自动补全、代码提示等功能。 构建工具&#xff1a;帮助自动化构建过程。 调试工具&#xff1a;提供更强大的调试功…

anaconda 创建环境失败 解决指南

anaconda 创建环境失败 解决指南 一、问题描述 我在宿舍有一台电脑。由于我经常泡在实验室&#xff0c;所以那台电脑不是经常用&#xff0c;基本吃灰。昨天晚上突然有在那台电脑上使用Camel-AI部署多智能体协同需求&#xff0c;便戳开了电脑&#xff0c;问题也随之而来。 当…

河北统计年鉴(2000-2021年)

《河北统计年鉴》不仅记录了河北省经济社会发展的历史轨迹&#xff0c;还系统地展示了其现状。它涵盖了经济发展、人口就业、社会事业、居民生活、环境保护等多个领域的数据资料 2000-2021年河北统计年鉴数据整理资源-CSDN文库https://download.csdn.net/download/2401_845856…

创建和管理IPAM

IPAM&#xff08;IP Address Manager&#xff09;为用户提供全局地址管理的能力。创建IPAM后&#xff0c;您可以在IPAM中创建私网作用范围。每个私网作用范围都代表一个独立的地址作用域&#xff0c;在私网作用范围中可以创建地址池来管理和分配IP地址资源。本文为您介绍如何创…