当前位置: 首页 > news >正文

vue3的hooks你可以了解一下

更详细的hooks了解参考这个大佬的文章:掘金:Hooks和Mixins之间的区别

刚开始我简单看了几篇文章感觉Hooks这个东西很普通,甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯定不是白给的,所以我开始在我的项目里面不停的操作、试验demo,所以我发现了一些他使用非常舒服的点

一、首先阅读性很好

在这里插入图片描述就比如这里很清晰就能知道我是从外部引入进来的hooks函数和变量

二、其次你可以在hooks中引入vue3的api在这里插入图片描述

像我这里我自己在hooks中使用了这三个api进行业务操作

三、多文件引入变量互相隔离

这个特性其实是需要看你是怎么写的,我推荐是在hooks中export一个默认函数,然后在函数中进行生命周期、api等等逻辑操作,看我的例子:

export function useShortcut() {const shortcutInfo = reactive({ctrlKey: false,shiftKey: false,altKey: false,},);function test() {shortcutInfo.q1213 = 'asfdasdf';}return {shortcutInfo,test,};
}

这样就能保证在不同文件引入后变量不会出现互相污染的问题了

四、注意事项

在vue文件中对hooks进行引入后要解构出来再使用!!!

以下错误示范❌:

import { useShortcut } from './hooks/useShortcutKeys';
setInterval(() => {useShortcut().test();console.log('shortcutInfo', useShortcut().shortcutInfo);
}, 2000);

正确示范🎈:

import { useShortcut } from './hooks/useShortcutKeys';
const { shortcutInfo, test } = useShortcut();setInterval(() => {test();console.log('shortcutInfo', shortcutInfo);
}, 2000);

我的test方法是更改shortcutInfo的值,只有在我正确示范这个例子下才能正常获取更改后的shortcutInfo值,因为你的变量是定义在方法中的。如果每次都是通过这个方法返回值取值出来(useShortcut().shortcutInfo❌)的变量都是新的变量!!!

相关文章:

vue3的hooks你可以了解一下

更详细的hooks了解参考这个大佬的文章:掘金:Hooks和Mixins之间的区别 刚开始我简单看了几篇文章感觉Hooks这个东西很普通,甚至感觉还不如vue2的mixin好用。还有export import 感觉和普通定义一个utils文件使用没什么区别。但是Hooks这个东西肯…...

面试之HTTP

1.HTTP与HTTPS的区别 HTTP运行在TCP之上;HTTPS是运行在SSL之上,SSL运行在TCP之上两者使用的端口不同:HTTP使用的是80端口,HTTPS使用的是443端口安全性不同:HTTP没有加密,安全性较差;HTTPS有加密…...

测试框架pytest教程(3)夹具-@pytest.fixture

内置fixture Fixture使用pytest.fixture装饰,pytest有一些内置的fixture 命令可以查看内置fixture pytest --fixtures fixture范围 在pytest中,夹具(fixtures)具有不同的作用范围(scope),用于…...

GNU make系列之介绍Makefile

一.欢迎来到我的酒馆 在本章节介绍Makefile。 目录 一.欢迎来到我的酒馆二.GNU make 预览三.一个简单的Makefile四.make程序如何处理Makefile文件五.在Makefile中使用变量 二.GNU make 预览 2.1 GNU make工具会自动决定哪些程序需要被重新编译,并且执行相应的命令来…...

Java8新特性之——方法引用

文章目录 一、简介二、举例实例方法引用(实例对象::实例方法名)静态方法引用(类名::静态方法名)类成员方法引用(类名::实例方法名)构造方法引用(类名::new)数组构造方法引用&#xf…...

等保测评--安全区域边界--测评方法

安全子类--边界防护 a) 应保证跨越边界的访问和数据流通过边界设备提供的受控接口进行通信; 一、测评对象 网闸、防火墙、路由器、交换机和无线接入网关设备等提供访问控制功能的设备或相关组件 二、测评实施 1)应核查在网络边界处是否部署访问控制设备&#x…...

【Flutter】Flutter 使用 device_info_plus 获取设备的制造商、型号等信息

【Flutter】Flutter 使用 device_info_plus 获取设备的制造商、型号等信息 文章目录 一、前言二、安装和基本使用三、实际业务中的用法四、完整示例五、总结 一、前言 在这篇博客中,我将为你介绍一个非常实用的 Flutter 插件:device_info_plus。这个插件…...

Flink、Yarn架构,以Flink on Yarn部署原理详解

Flink、Yarn架构,以Flink on Yarn部署原理详解 Flink 架构概览 Apache Flink是一个开源的分布式流处理框架,它可以处理实时数据流和批处理数据。Flink的架构原理是其实现的基础,架构原理可以分为以下四个部分:JobManager、TaskM…...

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用 一、软件设计模式相关知识点二、摘要三、正文四、总结一、软件设计模式相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构...

CDH集群离线配置python3环境,并安装pyhive、impyla、pyspark

背景: 项目需要对数仓千万级数据进行分析、算法建模。因数据安全,数据无法大批量导出,需在集群内进行分析建模,但CDH集群未安装python3 环境,需在无网情况下离线配置python3环境及一系列第三方库。 采取策略&#xf…...

python并行操作(基于concurrent.futures.ThreadPoolExecutor)

文章目录 一、明确自身cpu可并行的核数二、根据所有任务计算在各个核上平均跑多少任务三、最后把任务划分在不同的核上跑四、拿来主义 此为利用cpu并行计算的能力,充分利用cpu在循环时并行计算。其实也是受C并行操作的影响,如果需要C版,可以移…...

Leetcode.73矩阵置零

给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 。请使用 原地 算法 class Solution {public void setZeroes(int[][] matrix) {int m matrix.length, n matrix[0].length;boolean[] row new boolean[m];boolean[] col…...

jdk 04 stream的collect方法

01.收集(collect) collect,收集,可以说是内容最繁多、功能最丰富的部分了。 从字面上去理解,就是把一个流收集起来,最终可以是收集成一个值也可以收集成一个新的集合。 collect主要依赖java.util.stream.Collectors类内置的静态方…...

介绍REST API

REST (Representational State Transfer) 是一种基于 web 架构的 API 设计风格, 允许客户端应用程序通过 HTTP 请求与服务器进行交互。RESTful API就是按照REST风格设计的API。 RESTful API 的设计原则包括:使用统一资源标识符 (URI) 标识资源&#xff…...

【leetcode 力扣刷题】反转链表+递归求解

反转链表递归求解 206. 反转链表解法①:取下一个节点在当前头节点前插入解法②:反转每个节点next的指向解法③:递归 92.反转链表Ⅱ反转left到right间节点的next指向 234.回文链表解法①:将链表元素存在数组中,在数组上…...

一文读懂Redis配置,史上真香配置

文章目录 基本配置项AOF持久化配置项RDB持久化配置项淘汰策略配置项主从复制配置项鸣谢 让那些总为redis连接异常的小白指引明灯,少走弯路。为那些不知道如何进行高级配置的大佬整一杯小酒。 基本配置项 bind:用于设置Redis绑定的IP地址。默认情况下&…...

maven打出jar中动态替换占位符

使用场景&#xff1a; maven打出的jar中pom.xml动态替换占位符 有些时候某些公共工具jar包被项目引用后发现公共jar的pom.xml中的version依然还是占位符&#xff0c;例如下面 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok<…...

【Git游戏】通过游戏重新学习Git

在提交树上移动 HEAD HEAD:一个标志符号&#xff08;通常情况下指向当前分支&#xff0c;间接指向当前最新的提交记录&#xff09; 可以通过git checkout commitID从而指向提交记录 commitID 本身是一串哈希值&#xff08;基于 SHA-1&#xff0c;共 40 位&#xff09; 我们在…...

如何通过以太坊JSON-RPC方式获取ERC-20代币的信息?

目录 一、ERC-20介绍 二、ERC-20代币标准功能 1、可选功能 2、标准功能 三、获取代币信息...

线性代数的学习和整理4: 求逆矩阵的多种方法汇总

目录 原始问题&#xff1a;如何求逆矩阵&#xff1f; 1 EXCEL里&#xff0c;直接可以用黑盒表内公式 minverse() 数组公式求A- 2 非线性代数方法&#xff1a;解方程组的方法 3 增广矩阵的方法 4 用行列式的方法计算&#xff08;未验证&#xff09; 5 A-1/|A|*A* &…...

Mamba模型实战:如何用S6替代Transformer处理长文本(附代码示例)

Mamba模型实战&#xff1a;如何用S6替代Transformer处理长文本&#xff08;附代码示例&#xff09; 在自然语言处理领域&#xff0c;Transformer架构因其强大的注意力机制而长期占据主导地位。然而&#xff0c;当面对长文本处理任务时&#xff0c;Transformer的二次方计算复杂度…...

GIL已死,但并发未生:从字节码级剖析无锁Python的7类竞态陷阱与4种Lock-Free算法选型矩阵

第一章&#xff1a;GIL已死&#xff0c;但并发未生&#xff1a;无锁Python并发范式的认知重构Python的全局解释器锁&#xff08;GIL&#xff09;长期被视为并发编程的“原罪”&#xff0c;但自CPython 3.13起&#xff0c;GIL在I/O密集型路径中已被条件性移除&#xff0c;而3.14…...

从隔离到互联:工业现场中耐达讯自动化CC-Link IE转Modbus RTU实战指南

在工业自动化领域中&#xff0c;不同协议设备间的通信壁垒正成为智能制造的核心挑战之一。耐达讯自动化的CC-Link IE转Modbus RTU专用网关&#xff0c;通过硬件级协议转换技术&#xff0c;高效实现CC-Link IE高速以太网与Modbus RTU串口设备的无缝对接&#xff0c;帮助企业快速…...

如何让扫描PDF变得可搜索:PDFOCR-Desktop的智能文字识别方案

如何让扫描PDF变得可搜索&#xff1a;PDFOCR-Desktop的智能文字识别方案 【免费下载链接】pdfocr-desktop PDF OCR Application, adds an OCR text layer to scanned PDF files, allowing them to be copied and searched. 项目地址: https://gitcode.com/gh_mirrors/oc/pdfo…...

革新性硬件控制工具:OmenSuperHub实现游戏本性能优化与完全掌控

革新性硬件控制工具&#xff1a;OmenSuperHub实现游戏本性能优化与完全掌控 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普暗影精灵系列游戏本设计的开源硬件控制工具&#xff0c;提供完全离线的…...

手把手教学:用LongCat动物百变秀快速生成动物拟人化表情包和头像

手把手教学&#xff1a;用LongCat动物百变秀快速生成动物拟人化表情包和头像 1. 为什么选择LongCat动物百变秀 在当今社交媒体时代&#xff0c;个性化的动物表情包和头像已经成为网络交流的重要组成部分。LongCat动物百变秀是一款基于美团开源模型的本地化AI图像编辑工具&…...

旧电脑秒变云服务器:用Proxmox VE打造家庭虚拟化实验室(ZFS配置优化版)

旧电脑秒变云服务器&#xff1a;用Proxmox VE打造家庭虚拟化实验室&#xff08;ZFS配置优化版&#xff09; 1. 为什么选择Proxmox VE搭建家庭实验室&#xff1f; 对于个人开发者和技术爱好者来说&#xff0c;拥有一套完整的虚拟化环境是提升技术能力的绝佳途径。Proxmox VE作为…...

gcoord与proj4js对比分析:选择最适合你的地理坐标库

gcoord与proj4js对比分析&#xff1a;选择最适合你的地理坐标库 【免费下载链接】gcoord 地理坐标系转换工具 项目地址: https://gitcode.com/gh_mirrors/gc/gcoord 在Web地图开发中&#xff0c;地理坐标系转换是一个常见需求。gcoord和proj4js都是优秀的JavaScript坐标…...

Gpmall分布式事务处理:订单创建与库存扣减的最终一致性保障

Gpmall分布式事务处理&#xff1a;订单创建与库存扣减的最终一致性保障 【免费下载链接】gpmall 项目地址: https://gitcode.com/gh_mirrors/gp/gpmall 在电商系统中&#xff0c;订单创建与库存扣减的分布式事务处理是确保数据一致性的核心挑战。Gpmall项目通过创新的P…...

墨语灵犀开源模型生态:对接LangChain/RAG构建专属翻译知识库

墨语灵犀开源模型生态&#xff1a;对接LangChain/RAG构建专属翻译知识库 1. 引言&#xff1a;当古典美学遇见现代AI架构 在人工智能技术快速发展的今天&#xff0c;翻译工具已经从简单的词汇转换演变为理解文化语境和语义深度的智能系统。「墨语灵犀」作为基于腾讯混元大模型…...