当前位置: 首页 > 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* &…...

告别手动调时间!用STM32F4的RTC闹钟和自动唤醒实现一个智能定时提醒器

STM32F4智能定时系统&#xff1a;RTC闹钟与自动唤醒实战指南 在物联网设备开发中&#xff0c;精确的时间管理和低功耗运行往往是产品成功的关键因素。STM32F4系列微控制器内置的RTC&#xff08;实时时钟&#xff09;模块&#xff0c;不仅提供精准的日历时钟功能&#xff0c;更通…...

STLink调试工具与STM8/STM32连接技术详解

STLink与STM8/STM32单片机连接技术详解1. STLink调试工具概述STLink是意法半导体(STMicroelectronics)官方推出的嵌入式开发调试工具&#xff0c;主要用于STM8和STM32系列单片机的程序烧录和在线调试。该工具具有以下核心功能特性&#xff1a;支持SWD(Serial Wire Debug)和SWIM…...

Hearthstone-Script:3大核心功能带你轻松玩转炉石传说自动化![特殊字符]

Hearthstone-Script&#xff1a;3大核心功能带你轻松玩转炉石传说自动化&#xff01;&#x1f525; 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09;&#xff08;2024.01.25停更至国服回归&#xff09; 项目地址: https://gitco…...

别再只会用QProgressBar了!用QPainterPath绘制Qt自定义进度条的完整指南

用QPainterPath实现Qt动态进度条的终极艺术 当标准进度条无法满足现代UI设计需求时&#xff0c;Qt的绘图系统为我们打开了无限可能。想象一下&#xff1a;你的应用加载界面不是单调的横条&#xff0c;而是会呼吸的光环、跳动的粒子流或是随音乐律动的波形——这些令人眼前一亮的…...

Navicat Reset Mac工具:3种无风险试用期重置方法,零基础也能掌握

Navicat Reset Mac工具&#xff1a;3种无风险试用期重置方法&#xff0c;零基础也能掌握 【免费下载链接】navicat_reset_mac navicat16 mac版无限重置试用期脚本 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac 您是否遇到过Navicat试用期到期的困扰&…...

一文搞懂:Agent、Harness Engineering、MCP、Skill 到底是什么

&#x1f9ed; 你是否被这些词搞晕过&#xff1f; Agent Harness Engineering MCP Skill Tool Workflow…… 大模型时代&#xff0c;新概念层出不穷。它们分别是什么&#xff1f;又如何协同工作&#xff1f; 这篇文章是你的概念地图。 大模型生态&#xff1a;四个核心概…...

Qwen3.5-35B-A3B-AWQ-4bit图文对话教程:如何利用上下文长度4096做长图分析

Qwen3.5-35B-A3B-AWQ-4bit图文对话教程&#xff1a;如何利用上下文长度4096做长图分析 1. 引言&#xff1a;当AI学会“看图说话” 想象一下&#xff0c;你拿到一张复杂的流程图、一张信息密集的仪表盘截图&#xff0c;或者一张包含大量文字和图表的长图。你不仅想知道图上有什…...

5个高效步骤掌握MOOTDX数据接口:构建专业金融分析系统指南

5个高效步骤掌握MOOTDX数据接口&#xff1a;构建专业金融分析系统指南 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx MOOTDX作为一款专为Python开发者设计的通达信数据接口封装库&#xff0c;通过…...

C++和C语言中填充字符、宽度的语法差异

本人因为昨天参加学校天梯赛&#xff0c;后惊讶发现天梯赛题目输出要求答案有格式需求&#xff0c;无奈落榜&#xff0c;仅以此文来告诫自身 &#xff08;绷不住了&#xff09;。C语言一、C 语言&#xff08;printf&#xff09;基本格式&#xff1a;%[flags][width][.precision…...

EfficientDet的‘复合缩放’到底强在哪?对比YOLOv5、RetinaNet的模型扩展策略

EfficientDet复合缩放策略的工程实践解析&#xff1a;从理论优势到部署优化 1. 目标检测模型扩展的技术演进脉络 计算机视觉领域对高效目标检测的需求从未如此迫切。随着应用场景从云端服务器向边缘设备、移动终端和嵌入式系统的扩展&#xff0c;算法工程师们面临着一个核心矛…...