Vue3中hook的使用及使用中遇到的坑
目录
- 前言
- 一,什么是hook
- 二, hook函数的使用
- 2.1 铺垫
- 2.2 hook函数的写法
- 2.3 使用写好的hook函数
- 后记
前言
在学习Es6的时候,我们开始使用类与对象,开始模块化管理;在Vue中我们可以使用mixin进行模块化管理;Vue3中同样存在模块化管理,需要使用到hook函数。
本节博客就针对Vue3中的hook函数进行讲解,在讲解中会穿插hook使用中遇到的坑和需要注意的东西。(标黄部分)
一,什么是hook
hook的本质是一个函数,把setup函数中使用的composition Api进行了封装,类似于Vue2中的mixin。
二, hook函数的使用
2.1 铺垫
我们先来写一段很简单的代码:
<template><div>我是App组件</div><div>sum的值为{{ sum }}</div><button @click="add">点击sum的值加1</button>
</template><script>
import {ref} from 'vue'
export default {name: 'App',setup() {let sum = ref(0)function add() {sum.value ++}return {sum, add}}
}
</script><style></style>
上面的代码简单的用ref定义了一个sum,并且设置了一个按钮,如若点击则sum值可加一。

如果现在,有五个组件都要实现类似的功能,想请问大家,是不是要把这段代码复制粘贴五次呢?
其实不用,了解模块化管理的读者可以猜到,Vue3中也可以实现,代码只写一次,需要时复用的功能——hook函数。
且看hook函数的讲解。
2.2 hook函数的写法
很简单,首先我们创建一个名为hooks的文件夹,内部创建一个js文件,js文件名可以根据功能来取:

把我们刚刚写的关于sum的部分粘贴到这个js文件中:

接着,我们把这些内容放到一个函数中并暴露出去,注意:ref是需要引用才能使用的,在js文件中依旧需要引入。

别忘了把需要用到的东西return出去:

以上,文件就已经写好了。
2.3 使用写好的hook函数
接下来我们要在App.vue中使用刚刚写好的addSum模块。
一共有三个步骤:引用、接收、暴露。
首先,引用:在App.vue组件中import:

其次,接收,这里特别容易出错!!
这里我需要强调几点:首先,let后面定义的东西不能与addSum同名,这是个大坑,会报错。其次就是,最好像我下面这样解构一下。不然你用的时候只能像别的案例一样只获取一个值。

最后,别忘记把我们接收到的sum,add返回出去。

后记
本篇博客中遇见的问题笔者花了很久才解决。如果还有什么问题可以在评论区里面发表。
欢迎关注,期待跟您带来更好的文章。
相关文章:
Vue3中hook的使用及使用中遇到的坑
目录前言一,什么是hook二, hook函数的使用2.1 铺垫2.2 hook函数的写法2.3 使用写好的hook函数后记前言 在学习Es6的时候,我们开始使用类与对象,开始模块化管理;在Vue中我们可以使用mixin进行模块化管理;Vu…...
数据库-差集交集并集
数据库-差集交集并集[toc]图示一、并集运算(UNION)并集:两个集合的并集是一个包含集合A和B中所有元素的集合。在T-SQL中,UNION集合运算可以将两个输入查询的结果组合成一个结果集。需要注意的是:如果一个行在任何一个输…...
spark性能调优(四):网络
网络 一、数据读写二、数据处理三、数据传输在平衡不同硬件资源的时候,相比于CPU、内存、磁盘,网络开销处理延迟最高 一、数据读写 对于大多数应用来说,第一步都是从分布式系统中读取数据,不论什么文件格式,也不管哪种文件存储系统,访问数据源是否会引入网络开销,取决于任务与…...
高性能 WPF 图表控件LightningChart.NET:支持从 Web 服务器获取数据 | 附最新版试用下载
LightningChart.NET 是一款高性能 WPF 和 Winforms 图表,可以实时可视化多达1万亿个数据点。可有效利用CPU和内存资源,实时监控数据流。同时,LightningChart使用突破性创新技术,以实时优化为前提,大大提升了实时渲染的效率和效果&…...
文科女生月入14k背后:转行IT软件测试不是谁都学得来!
转行软件测试背后,或许每个人都有自己的无奈。就拿今天要和大家分享的这位小姐姐来说吧,如果不是万不得已,又怎么会狠下心来转行到IT互联网? 应届生逃避就业,考研失败 和大多数人一样,小姐姐的大学生活过得…...
GB28181监控视频统一汇聚平台LiveGBS将海康大华华为宇视等厂家监控设备统一接入后如何生成固定播放链接或者固定的流地址可以直接无插件播放或者拉取
目前汇聚各种厂家监控设备的视频汇聚平台,基本都是通过GB28181标准协议实现的。下面介绍下LiveGBS Web无插件直播的GB28181视频平台将各厂家(包括海康、大华、华为、宇视、天地伟业等)监控汇聚到同一个服务器上后,如何或者直播链接…...
认识BUG
如何描述 bug一个合格的 bug 描述应该包括以下几个部分:发现问题的版本开发人员需要知道出现问题的版本,才能够获取对应版本的代码来重现故障,并且版本的标识也有利于统计和分析每个版本的质量。问题出现的环境环境分为硬件环境和软件环境&am…...
C++string类型内置的搜索函数
string的搜索操作 string类型一共提供了6种不同的搜索函数,每个函数都有4个重载版本。如果搜索成功,每个搜索操作都会返回一个 string::size_type类型的值,表示匹配发生位置的下标。 如果搜索失败,则会返回一个名位string::npos…...
Disruptor 消费线程丢失、写入无限阻塞问题
使用jstack打印后,发现 1)写入disruptor线程卡死在 java.lang.Thread.State: TIMED_WAITING (parking) at sun.misc.Unsafe.park(Native Method) at java.util.concurrent.locks.LockSupport.parkNanos(LockSupport.java:338) at com.lmax.…...
【禅道测试环境搭建及安装】Linux上的禅道安装教程,从环境搭建开始
目录 一、操作环境 二、安装VMware 三、安装FinalShell 四、在VMware里安装CentOS 1.前置:CentOS的下载 2.CentOS的安装 3.查看网络 五、用宿主机连接远程的虚拟机 六、禅道包的下载与CentOS配置的修改 七、上传项目包并安装禅道 一、操作环境 Windows 10…...
spring-boot rabbitmq整合
文章请参考:Springboot 整合RabbitMq ,用心看完这一篇就够了 mven依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></depende…...
CentOS7安装redis redis常用命令
Redis简介Redis是一个开源免费的、使用C语言编写的NoSQL 数据库。Redis基于内存运行并支持持久化(RDB、AOF方式将数据保存在磁盘),采用key-value (键值对)的存储形式。Redis数据类型Redis支持五种数据类型:string(字符串)…...
世界文明的脉络
人类文明大体上可分为农耕文明、海洋文明和游牧文明三大类别,文明的标志一般是文字、青铜器、城市以及礼仪性建筑等要素。据此,史学家目前已发现了巴比伦文明、埃及文明、印度文明、华夏文明、希腊文明和波斯文明六种主要文明,其中前四种文明…...
map和set 的封装
文章目录引入key-value模型map和set底层setset的几个重要接口mapmap几个重要的接口map和set的封装引入 对于map和set的引入,我们用一道在程序中常见的问题解决: 给定一个数组int arr[]{1,2,1,3,1,4,1,5,5,2,3,4,5};,给出以下问题的解决方案&…...
Springboot集成kafka(环境搭建+演示)|超级详细,建议收藏
Springboot集成kafka一、前言🔥二、环境说明🔥三、概念🔥四、CentOS7安装kafka🔥1.下载kafka安装包2.下载好后,进行解压六、kafka项目集成🔥1️⃣pom引入2️⃣配置kafka3️⃣一个kafka消息发送端4️⃣定义一…...
Qt 绘制图表 - Qt Charts版
一、前言 自从 Qt 发布以来,给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的图表库,这就使得 QWT、QCustomPlot 等第三方图表库有了巨大的生存空间,为了降低开发成本,大家都涌向了这些第三方库。这种…...
Java学习笔记 --- JavaScript
一、JavaScript介绍 JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为 JavaScript JS是弱类型&…...
AP5216 平均电流型LED 降压恒流驱动器
产品描述 AP5216 是一款 PWM工作模式, 高效率、外围简单、内置功率管,适用于5V~100V输入的高精度降压 LED 恒流驱动芯片。输出最大功率可达 9W,最大电流 1.0A。 AP5216 可实现全亮/半亮功能切换,通过MODE 切换:全亮/…...
B站的多个视频教程,怎样生成一个二维码?
商业插画视频教程、电商运营视频教程、在线网课视频、舞蹈视频教程、摄影视频教程、语言学习教程、纪录片视频…所有你发布在哔哩哔哩上的视频,都可以放在一个二维码里面。 任何人只要扫描这个二维码,就能在线观看你的这些视频教程!分享起来…...
深入底层源码的Listener内存马(内存马系列篇三)
写在前面 继前面的FilterServlet内存马技术,这是系列文章的第三篇了,这篇将给大家带来的是Listener内存马技术。 前置 什么是Listener? 监听器 Listener 是一个实现特定接口的 Java 程序,这个程序专门用于监听另一个 Java 对象…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
基于FPGA的PID算法学习———实现PID比例控制算法
基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容:参考网站: PID算法控制 PID即:Proportional(比例)、Integral(积分&…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
06 Deep learning神经网络编程基础 激活函数 --吴恩达
深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
PHP 8.5 即将发布:管道操作符、强力调试
前不久,PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5!作为 PHP 语言的又一次重要迭代,PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是,借助强大的本地开发环境 ServBay&am…...
