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

Vue3 自定义hook

news 来源：原创 2025/5/15 16:20:38

文章目录

Vue3 自定义hook
- 概述
- 用法

Vue3 自定义hook

概述

Vue3推荐利用Vue的组合式API函数进行代码封装，这种封装方式统称为自定义hook。

用法

定义 hook/countHook.js：

import {computed, ref, watch} from "vue";export default (initCount = 0) => {const msg = ref("hello world");const count = ref(initCount);const increase = () => {count.value++;};const doubleCount = computed(() => {return count.value * 2;});watch(doubleCount, (newVal, oldVal) => {console.log("doubleCount发生变化了", newVal, oldVal);});return {msg,count,increase,doubleCount,};
}

定义组件 Comp1.vue:

<script setup>
import countHook from '../hooks/countHook.js';const {msg, count, doubleCount, increase} = countHook();
</script><template><p>Comp1</p><p>msg: {{ msg }}</p><p>count: {{ count }}</p><p>doubleCount: {{ doubleCount }}</p><button @click="increase">increase</button>
</template>

定义组件 Comp2.vue:

<script setup>
import countHook from '../hooks/countHook.js';const {msg, count, doubleCount, increase} = countHook();
</script><template><p>Comp2</p><p>msg: {{ msg }}</p><p>count: {{ count }}</p><p>doubleCount: {{ doubleCount }}</p><button @click="increase">increase</button>
</template>

使用:

<script setup>
import {markRaw, ref} from "vue";
import Comp1 from "./components/Comp1.vue";
import Comp2 from "./components/Comp2.vue";const tab = ref(null);function changeTab(comp) {tab.value = markRaw(comp);
}changeTab(Comp1);
</script><template><h1>自定义hook</h1><button @click="changeTab(Comp1)">Comp1</button><button @click="changeTab(Comp2)">Comp2</button><component :is="tab"></component>
</template>

Vue3 自定义hook

文章目录 Vue3 自定义hook概述用法 Vue3 自定义hook 概述 Vue3推荐利用Vue的组合式API函数进行代码封装，这种封装方式统称为自定义hook。用法定义 hook/countHook.js： import {computed, ref, watch} from "vue";export default (initC…...

编程日记 2025/5/15 16:20:38

Sub CopyRowToColumn()On Error GoTo ErrorHandler 添加错误处理Application.ScreenUpdating FalseApplication.Calculation xlCalculationManualApplication.EnableEvents False 禁用事件处理Dim lastCol As LongDim lastRow As LongDim i As Long, colCount As LongDim …...

编程日记 2025/5/15 9:54:14

使用Llama 3.1创建合成数据集以调优你的大型语言模型

使用Llama 3.1创建合成数据集以调优你的大型语言模型在数据驱动的人工智能领域，数据是核心资产。开发高质量数据集既复杂又昂贵，因此很多实验室和开发者选择使用合成数据集。本文将介绍如何利用大型语言模型Llama 3.1 405B创建合成数据集，并…...

编程日记 2025/5/15 11:31:17

【Ubuntu22.04】VMware虚拟机硬盘扩容

1.首先打开虚拟机设置 2.根据需要对硬盘扩展这边提示我们还需要进入虚拟机在内部分区 3.安装界面化磁盘管理工具 # 安装 sudo apt install gparted# 启动 sudo gparted调整硬盘大小调整的时候会提示我们硬盘是只读的，因此还要进行操作新建终端重新挂载文件系…...

编程日记 2025/5/13 18:01:11

初学stm32 --- DMA直接存储器

目录 DMA介绍 STM32F1 DMA框图 DMA处理过程 DMA通道 DMA优先级 DMA相关寄存器介绍 F1 DMA通道x配置寄存器（DMA_CCRx） DMA中断状态寄存器（DMA_ISR） DMA中断标志清除寄存器（DMA_IFCR） DMA通道x传输…...

编程日记 2025/5/14 2:25:30

reactor中的并发

1. reactor中的并发有两种方式 1.1 flatmap，底层是多线程并发处理。在reactor的演讲中，flatmap对于io类型的并发效果较好. flamap有两个参数: int concurrency, int prefetch。分别代表并发的线程数和缓存大小注意凡是参数中有prefetch的，都…...

编程日记 2025/5/14 22:09:27

HTML - ＜script＞，＜noscript＞

编程日记 2025/5/15 16:03:21

C#语言的函数实现

C#语言的函数实现在现代编程语言中，函数（Function）是最基本也是最重要的组成部分之一。函数不仅提高了代码的复用性，还使得程序结构更清晰。C#作为一种多用途的编程语言，函数的知识是程序员必备的基本技能之一。本文…...

编程日记 2025/5/15 15:57:22

JAVA I/O流练习1

往D盘中的JAVA复习文件夹中写数据： 数据改了一下哈： import java.io.*; import java.util.Scanner; public class Test {public static void main(String[] args) throws IOException {String fileName"D:JAVA复习\\grade.txt";FileWriter w…...

编程日记 2025/5/11 14:38:12

HTML——75. 内联框架

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>内联框架</title><style type"text/css">iframe{width: 100%;height: 500px;}</style></head><body><!--iframe元素会创建包含…...

编程日记 2025/5/15 4:40:10

js获取当前浏览器地址，ip，端口号等等

前言： js获取当前浏览器地址，ip，端口号等等 window.location属性查询具体属性： 1、获取他的ip地址 window.location.hostname 2、获取他的端口号 window.location.port 3、获取他的全路径 window.location.origin 4、获取…...

编程日记 2025/5/12 2:15:52

C++虚函数（八股总结）

什么是虚函数虚函数是在父类中定义的一种特殊类型的函数，允许子类重写该函数以适应其自身需求。虚函数的调用取决于对象的实际类型，而不是指针或引用类型。通过将函数声明为虚函数，可以使继承层次结构中的每个子类都能够使用其自己的实现&a…...

编程日记 2025/5/7 17:20:08

【每日学点鸿蒙知识】跳转三方地图、getStringSync性能、键盘避让模式等

1、跳转三方地图导航页类似于Android 跳转到地图APP 导航页面： // 目标地点的经纬度和名称 double destinationLat 36.547901; double destinationLon 104.258354; String destinationName "目的地名称"; // 构建URI Uri uri Uri.parse("…...

编程日记 2025/5/9 23:01:41

【线性代数】通俗理解特征向量与特征值

这一块在线性代数中属于重点且较难理解的内容，下面仅个人学习过程中的体会，错误之处欢迎指出，有更简洁易懂的理解方式也欢迎留言学习。文章目录概念计算几何直观理解意义概念矩阵本身就是一个线性变换，对一个空间中的向量应用…...

编程日记 2025/5/13 5:53:29

C#设计模式（行为型模式）：备忘录模式，时光倒流的魔法

C#设计模式：备忘录模式，时光倒流的魔法在软件开发中，我们经常会遇到需要保存对象状态，并在未来某个时刻恢复的场景。例如： 撤销操作： 文本编辑器中的撤销功能，游戏中的回退操作。事务回滚&am…...

编程日记 2025/4/23 2:37:47

服务器信息整理：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统

文章目录引言I BIOS时间Windows查看BIOS版本安装日期linux查看BIOS时间II 操作系统安装日期LinuxWindowsIII MAC 地址IV 设备序列号Linux 查看主板信息知识扩展Linux常用命令引言信息内容：重点信息：用途、操作系统安装日期、设备序列化、IP、MAC地址、BIOS时间、系统 Linux…...

编程日记 2025/5/8 12:03:32

用OpenCV实现UVC视频分屏

分屏 OpencvUVC代码验证后话用OpenCV实现UVC摄像头的视频分屏。 Opencv opencv里有很多视频图像的处理功能。 UVC Usb 视频类，免驱动的。视频流格式有MJPG和YUY2。MJPG是RGB三色通道的。要对三通道进行分屏显示。代码 import cv2 import numpy as np video …...

编程日记 2025/5/15 12:27:25

【C#学习】基类的静态变量派生类会如何处理

来源GPT，仅记录学习在C#中，子类继承父类的public static变量时，父类的静态变量对所有类（包括子类）都是共享的。子类并不会重新创建父类静态变量，而是共享父类的静态成员。具体行为： 静态变量…...

编程日记 2025/5/5 3:57:01

Unity3D仿星露谷物语开发19之库存栏丢弃及交互道具

1、目标从库存栏中把道具拖到游戏场景中，库存栏中道具数相应做减法或者删除道具。同时在库存栏中可以交换两个道具的位置。 2、UIInventorySlot设置Raycast属性在UIInventorySlot中，我们只希望最外层的UIInventorySlot响应Raycast，他下面…...

编程日记 2025/5/10 11:02:49

SQL进阶实战技巧：如何利用 Oracle SQL计算线性回归置信区间？

目录 1 置信区间计算方法步骤1：计算回归系数步骤2：计算标准误差步骤3：计算置信区间 2 数据准备 <...

编程日记 2025/3/18 6:21:43

计算机网络——网络层—IP数据报与分片

一、IP 数据报的格式 • 一个 IP 数据报由首部和数据两部分组成。 • 首部的前一部分是固定长度，共 20 字节，是所有 IP 数据报必须具有的。 • 在首部的固定部分的后面是一些可选字段，其长度是可变的。 IP 数据报首部的固定部分中的各字段版…...

编程日记 2025/5/4 4:54:48

高山旅游景区有效降低成本，无人机山下到山上物资吊运技术详解

在高山旅游景区，传统的物资运输方式往往面临人力成本高昂、效率低下等问题，而无人机技术的引入为这一难题提供了新的解决方案。以下是对无人机从山下到山上进行物资吊运技术的详细解析： 一、无人机物资吊运技术的优势 1. 降低人力成本&#…...

编程日记 2025/5/6 2:55:39

Linux 注册线程化的中断处理程序

1. 注册线程化中断处理函数 devmem_request_threaded_irq 是 Linux 内核中的一个函数，用于请求并注册一个线程化的中断处理程序。这个函数允许开发者注册一个中断处理函数，这个函数会在中断发生时被调用，从而实现相应的中断处理逻辑。它通过…...

编程日记 2025/5/11 5:10:25

【狂热算法篇】解锁数据潜能：探秘前沿 LIS 算法

嘿，各位编程爱好者们！今天带来的 LIS 算法简直太赞啦无论你是刚入门的小白，还是经验丰富的大神，都能从这里找到算法的奇妙之处哦！这里不仅有清晰易懂的 C 代码实现，还有超详细的算法讲解，让你轻…...

编程日记 2025/5/9 5:43:12

Linux: 关于 mount 的一些细节

文章目录 1. 前言2. mount 的主要细节 1. 前言限于作者能力水平，本文可能存在谬误，因此而给读者带来的损失，作者不做任何承诺。 2. mount 的主要细节 mount 从系统调用 sys_mount() 发起，如 mount -t tmpfs cgroup /sys/fs/cg…...

编程日记 2025/5/13 0:27:24

CSS3——3. 书写格式二

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head><body><!--3.属性名必须是…...

编程日记 2025/5/10 15:06:15

Java-JVM详解

Java-JVM ①JVM概述 ❶基本介绍 JVM：全称 Java Virtual Machine，一个虚拟计算机，Java 程序的运行环境（Java二进制字节码的运行环境） 特点： Java 虚拟机基于二进制字节码执行，由一套字节码指…...

编程日记 2025/5/9 13:35:35

docker搭建atlassian-confluence:7.2.0

文章目录引言I 部署前准备数据库镜像准备自己构建镜像dockerhub第三方镜像II 安装启动容器基础配置（获取服务器ID）授权码获取集群选择设置数据库配置管理员账号引言准备数据库、镜像启动容器获取服务器ID根据服务器ID等信息，基于atlassian-agent.jar 授权I 部署前准备数…...

编程日记 2025/5/6 17:52:41

YOLOv8实战人员跌倒检测

本文采用YOLOv8作为核心算法框架，结合PyQt5构建用户界面，使用Python3进行开发。YOLOv8以其高效的实时检测能力，在多个目标检测任务中展现出卓越性能。本研究针对人员跌倒目标数据集进行训练和优化，该数据集包含丰富人员跌倒图像样…...

编程日记 2025/5/6 21:13:07

瑞芯微rk3568平台 openwrt系统适配ffmpeg硬件解码（rkmpp）

瑞芯微rk3568平台 openwrt系统适配ffmpeg硬件解码（rkmpp） RK3568及rkmpp介绍编译安装mpp获取源码交叉编译安装 libdrmlibdrm-2.4.89 make 方式编译（cannot find -lcairo，不推荐）下载源码编译编译错误： multiple definition of `nouveau debug‘错误cannot find -lcairo:…...

编程日记 2025/5/15 3:00:25

自动驾驶控制与规划——Project 6: A* Route Planning

目录零、任务介绍一、算法原理1.1 A* Algorithm1.2 启发函数二、代码实现三、结果分析四、效果展示4.1 Dijkstra距离4.2 Manhatten距离4.3 欧几里德距离4.4 对角距离五、后记零、任务介绍 carla-ros-bridge/src/ros-bridge/carla_shenlan_projects/carla_shenlan_a_star_p…...

编程日记 2025/5/13 15:14:03

wordpress报错open_basedir restriction in effect

Warning: file_exists(): open_basedir restriction in effect. File(/www/wwwroot/wp-content/plugins/woocommerce/patterns/banner.php) is not within the allowed path(s): 关闭防跨站攻击...

编程日记 2025/5/13 21:32:52

VSCode Live Server 插件安装和使用

VSCode Live Server是一个由Ritwick Dey开发的Visual Studio Code扩展插件，它提供了一个带有实时重载功能的本地开发服务器。在VSCode中安装和使用Live Server插件进行实时预览和调试Web应用程序。这将大大提高前端开发效率，使网页设计和开发变得更为流畅…...

编程日记 2025/5/11 11:49:03

网络安全-XSS跨站脚本攻击（基础篇）

漏洞扫描的原理 1.跨站脚本攻击介绍 xss跨站脚本攻击： xSS 全称（Cross site Scripting ）跨站脚本攻击，是最常见的Web应用程序安全漏洞之一，位于OWASP top 10 2013/2017年度分别为第三名和第七名，XSS是指攻…...

编程日记 2025/5/12 7:30:09

【C++笔记】红黑树(RBTree)深度剖析和AVL树的对比分析

【C笔记】红黑树(RBTree)深度剖析和AVL树的对比分析 🔥个人主页：大白的编程日记 🔥专栏：C笔记文章目录【C笔记】红黑树(RBTree)深度剖析和AVL树的对比分析前言一.红黑树的定义1.1 红黑树的概念1.2红黑树的规则1.3 红黑树对比A…...

编程日记 2025/5/10 14:16:46

Mysql 性能优化：索引条件下推(ICP)

MySQL 索引下推（Index Condition Pushdown，ICP）是一种查询优化技术，旨在提高使用索引的查询效率。它是在 MySQL 5.6 中引入的，通过将部分 WHERE 子句的过滤条件下推到索引扫描阶段来减少不必要的回表操作，从…...

编程日记 2025/5/9 14:55:29

docker如何进入交互模式

目录使用 docker run -it 使用 docker exec -it 示例： 使用 docker attach 示例： 在写代码的时候对小白来说避免不了本地和docker环境执行结果不一样的情况这个时候需要进入正在运行的容器进行调试或执行一些命令操作。这时可以使用 Docker 提供的…...

编程日记 2025/5/15 0:50:10

闲谭SpringBoot--ShardingSphere分库分表探究

文章目录 1. 背景2. 创建数据库3. 修改yml配置文件4. 分片算法类5. 测试6 小结 1. 背景接上文，我们对日志表，进行了按月的分表，这样每个月几百万条数据量还是扛得住的。但是如果数据再多呢，除了提高硬件性能，还有一…...

编程日记 2025/5/12 11:36:53

在Java中Semaphore的解释及主要用途

目录定义使用方法主要用途使用场景示例定义 Semaphore（信号量）是Java并发编程中的一个同步工具类，用于控制对共享资源的访问。它通过维护一个计数器来管理多个线程对资源的并发访问数量。这个计数器表示当前可用的许可数&#xff0c…...

编程日记 2025/5/6 15:07:42

React Native 项目 Error: EMFILE: too many open files, watch

硬件：MacBook Pro (Retina, 13-inch, Mid 2014) OS版本：MacOS BigSur 11.7.10 (20G1427) 更新: 删除modules的方法会有反弹，最后还是手动安装了预编译版本的watchman。 React Native 项目运行npm run web，出现如下错误&#xff1a…...

编程日记 2025/5/8 9:56:32

四、VSCODE 使用GIT插件

VSCODE 使用GIT插件一下载git插件与git Graph插件二、git插件使用三、文件提交到远程仓库四、git Graph插件一下载git插件与git Graph插件二、git插件使用 git插件一般VSCode自带了git，就是左边栏目的图标在下载git软件后vscode的git插件会自动识别当前项目 …...

编程日记 2025/5/14 13:17:06

5 分布式ID

这里讲一个比较常用的分布式防重复的ID生成策略，雪花算法一个用户体量比较大的分布式系统必然伴随着分表分库，分机房部署，单体的部署方式肯定是承载不了这么大的体量。雪花算法的结构说明如下图所示: 雪花算法组成从上图我们可以看…...

编程日记 2025/5/10 4:39:53

flink的EventTime和Watermark

时间机制 Flink中的时间机制主要用在判断是否触发时间窗口window的计算。在Flink中有三种时间概念：ProcessTime、IngestionTime、EventTime。 ProcessTime：是在数据抵达算子产生的时间（Flink默认使用ProcessTime） IngestionT…...

编程日记 2025/5/14 8:18:06

T-SQL语言的函数实现

T-SQL语言的函数实现在数据库管理系统中，函数是一种非常重要的编程结构。SQL Server支持多种类型的函数，包括标量函数、表值函数和系统函数。本文将详细介绍T-SQL中函数的实现，结合实际应用场景，帮助读者深入理解函数的使用方法…...

编程日记 2025/5/10 8:00:37

SpringBoot 使用 Cache 集成 Redis做缓存保姆教程

1. 项目背景 Spring Cache是Spring框架提供的一个缓存抽象层，它简化了缓存的使用和管理。Spring Cache默认使用服务器内存，并无法控制缓存时长，查找缓存中的数据比较麻烦。因此Spring Cache支持将缓存数据集成到各种缓存中间件中。本文已常…...

编程日记 2025/5/10 17:11:02

Delphi+SQL Server实现的（GUI）户籍管理系统

1.项目简介本项目是一个户籍管理系统，用于记录住户身份信息，提供新户登记（增加）、户籍变更（修改）、户籍注销（删除）、户籍查询、曾用名查询、迁户记录查询以及创建备份、删除备份共8…...

编程日记 2025/5/10 9:33:52

Ungoogled Chromium127 编译指南 MacOS篇（七）- 安装依赖包

1. 引言在获取了 Ungoogled Chromium 的源代码之后，我们需要安装所有必要的依赖包。这些依赖包对于成功编译 Chromium 至关重要。本文将指导您完成所有必需软件包的安装。 2. 依赖包安装 2.1 使用 Homebrew 安装基础依赖 # 安装 Ninja 构建系统 brew install n…...

编程日记 2025/5/14 17:25:46

开放词汇检测新晋SOTA：地瓜机器人开源DOSOD实时检测算法

在计算机视觉领域，目标检测是一项关键技术，旨在识别图像或视频中感兴趣物体的位置与类别。传统的闭集检测长期占据主导地位，但近年来，开放词汇检测（Open-Vocabulary Object Detection-OVOD 或者 Open-Set Object Detec…...

编程日记 2025/5/4 13:37:09

json dump避免转义字符反斜杠

笔者在将json序列化到文件时，发现内容包含了反斜杠： [{"video": "MSRVTT-QA\/video_features\/7010.mp4","id": 170859},... ]解决办法是使用ensure_asciiFalse： json.dump(result_items, f, ensure_asciiFa…...

编程日记 2025/5/10 8:36:05

PL/SQL语言的正则表达式

PL/SQL语言的正则表达式详解在现代软件开发中，数据处理和文本处理是至关重要的环节之一。尤其是在数据库操作中，使用正则表达式来处理字符串数据能大幅提高效率和灵活性。PL/SQL（Procedural Language/SQL）是Oracle数据库的过程性…...

编程日记 2025/5/13 13:31:07

文章目录

Vue3 自定义hook

概述

用法

相关文章：