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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...