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

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的使用及使用中遇到的坑

目录前言一&#xff0c;什么是hook二&#xff0c; hook函数的使用2.1 铺垫2.2 hook函数的写法2.3 使用写好的hook函数后记前言 在学习Es6的时候&#xff0c;我们开始使用类与对象&#xff0c;开始模块化管理&#xff1b;在Vue中我们可以使用mixin进行模块化管理&#xff1b;Vu…...

数据库-差集交集并集

数据库-差集交集并集[toc]图示一、并集运算&#xff08;UNION&#xff09;并集&#xff1a;两个集合的并集是一个包含集合A和B中所有元素的集合。在T-SQL中&#xff0c;UNION集合运算可以将两个输入查询的结果组合成一个结果集。需要注意的是&#xff1a;如果一个行在任何一个输…...

spark性能调优(四):网络

网络 一、数据读写二、数据处理三、数据传输在平衡不同硬件资源的时候,相比于CPU、内存、磁盘,网络开销处理延迟最高 一、数据读写 对于大多数应用来说,第一步都是从分布式系统中读取数据,不论什么文件格式,也不管哪种文件存储系统,访问数据源是否会引入网络开销,取决于任务与…...

高性能 WPF 图表控件LightningChart.NET:支持从 Web 服务器获取数据 | 附最新版试用下载

LightningChart.NET 是一款高性能 WPF 和 Winforms 图表,可以实时可视化多达1万亿个数据点。可有效利用CPU和内存资源&#xff0c;实时监控数据流。同时&#xff0c;LightningChart使用突破性创新技术&#xff0c;以实时优化为前提&#xff0c;大大提升了实时渲染的效率和效果&…...

文科女生月入14k背后:转行IT软件测试不是谁都学得来!

转行软件测试背后&#xff0c;或许每个人都有自己的无奈。就拿今天要和大家分享的这位小姐姐来说吧&#xff0c;如果不是万不得已&#xff0c;又怎么会狠下心来转行到IT互联网&#xff1f; 应届生逃避就业&#xff0c;考研失败 和大多数人一样&#xff0c;小姐姐的大学生活过得…...

GB28181监控视频统一汇聚平台LiveGBS将海康大华华为宇视等厂家监控设备统一接入后如何生成固定播放链接或者固定的流地址可以直接无插件播放或者拉取

目前汇聚各种厂家监控设备的视频汇聚平台&#xff0c;基本都是通过GB28181标准协议实现的。下面介绍下LiveGBS Web无插件直播的GB28181视频平台将各厂家&#xff08;包括海康、大华、华为、宇视、天地伟业等&#xff09;监控汇聚到同一个服务器上后&#xff0c;如何或者直播链接…...

认识BUG

如何描述 bug一个合格的 bug 描述应该包括以下几个部分&#xff1a;发现问题的版本开发人员需要知道出现问题的版本&#xff0c;才能够获取对应版本的代码来重现故障&#xff0c;并且版本的标识也有利于统计和分析每个版本的质量。问题出现的环境环境分为硬件环境和软件环境&am…...

C++string类型内置的搜索函数

string的搜索操作 string类型一共提供了6种不同的搜索函数&#xff0c;每个函数都有4个重载版本。如果搜索成功&#xff0c;每个搜索操作都会返回一个 string::size_type类型的值&#xff0c;表示匹配发生位置的下标。 如果搜索失败&#xff0c;则会返回一个名位string::npos…...

Disruptor 消费线程丢失、写入无限阻塞问题

使用jstack打印后&#xff0c;发现 1&#xff09;写入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.前置&#xff1a;CentOS的下载 2.CentOS的安装 3.查看网络 五、用宿主机连接远程的虚拟机 六、禅道包的下载与CentOS配置的修改 七、上传项目包并安装禅道 一、操作环境 Windows 10…...

spring-boot rabbitmq整合

文章请参考&#xff1a;Springboot 整合RabbitMq &#xff0c;用心看完这一篇就够了 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方式将数据保存在磁盘)&#xff0c;采用key-value (键值对)的存储形式。Redis数据类型Redis支持五种数据类型&#xff1a;string&#xff08;字符串&#xff09;&#xf…...

世界文明的脉络

人类文明大体上可分为农耕文明、海洋文明和游牧文明三大类别&#xff0c;文明的标志一般是文字、青铜器、城市以及礼仪性建筑等要素。据此&#xff0c;史学家目前已发现了巴比伦文明、埃及文明、印度文明、华夏文明、希腊文明和波斯文明六种主要文明&#xff0c;其中前四种文明…...

map和set 的封装

文章目录引入key-value模型map和set底层setset的几个重要接口mapmap几个重要的接口map和set的封装引入 对于map和set的引入&#xff0c;我们用一道在程序中常见的问题解决&#xff1a; 给定一个数组int arr[]{1,2,1,3,1,4,1,5,5,2,3,4,5};&#xff0c;给出以下问题的解决方案&…...

Springboot集成kafka(环境搭建+演示)|超级详细,建议收藏

Springboot集成kafka一、前言&#x1f525;二、环境说明&#x1f525;三、概念&#x1f525;四、CentOS7安装kafka&#x1f525;1.下载kafka安装包2.下载好后&#xff0c;进行解压六、kafka项目集成&#x1f525;1️⃣pom引入2️⃣配置kafka3️⃣一个kafka消息发送端4️⃣定义一…...

Qt 绘制图表 - Qt Charts版

一、前言 自从 Qt 发布以来&#xff0c;给广大跨平台界面研发人员带来了无数的福利。但是Qt自己却一直没有提供自带的图表库&#xff0c;这就使得 QWT、QCustomPlot 等第三方图表库有了巨大的生存空间&#xff0c;为了降低开发成本&#xff0c;大家都涌向了这些第三方库。这种…...

Java学习笔记 --- JavaScript

一、JavaScript介绍 JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端&#xff0c;需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品&#xff0c;最早取名为LiveScript&#xff1b;为了吸引更多java程序员。更名为 JavaScript JS是弱类型&…...

AP5216 平均电流型LED 降压恒流驱动器

产品描述 AP5216 是一款 PWM工作模式, 高效率、外围简单、内置功率管&#xff0c;适用于5V&#xff5e;100V输入的高精度降压 LED 恒流驱动芯片。输出最大功率可达 9W&#xff0c;最大电流 1.0A。 AP5216 可实现全亮/半亮功能切换&#xff0c;通过MODE 切换&#xff1a;全亮/…...

B站的多个视频教程,怎样生成一个二维码?

商业插画视频教程、电商运营视频教程、在线网课视频、舞蹈视频教程、摄影视频教程、语言学习教程、纪录片视频…所有你发布在哔哩哔哩上的视频&#xff0c;都可以放在一个二维码里面。 任何人只要扫描这个二维码&#xff0c;就能在线观看你的这些视频教程&#xff01;分享起来…...

深入底层源码的Listener内存马(内存马系列篇三)

写在前面 继前面的FilterServlet内存马技术&#xff0c;这是系列文章的第三篇了&#xff0c;这篇将给大家带来的是Listener内存马技术。 前置 什么是Listener&#xff1f; 监听器 Listener 是一个实现特定接口的 Java 程序&#xff0c;这个程序专门用于监听另一个 Java 对象…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...