Vue3+TypeScript 封装一个好用的防抖节流自定义指令
一、前言:为什么需要防抖节流?
在前端开发中,高频触发的事件(如滚动、输入、点击等)容易导致性能问题。防抖(debounce) 和 节流(throttle) 是两种常用的优化手段:
- 防抖:事件触发后等待指定时间再执行,若期间重复触发则重新计时
- 节流:事件触发后立即执行,并在指定时间内不再响应新触发
本文将教你如何在 Vue3 + TypeScript 项目中封装一个灵活可复用的防抖/节流自定义指令。
二、实现思路分析
1. Vue3 自定义指令基础
Vue3 提供了 app.directive() 方法注册全局指令,生命周期包含:
mounted:元素挂载时updated:元素更新时unmounted:元素卸载时
2. 设计目标
- 支持防抖/节流模式切换
- 可自定义延迟时间
- TypeScript 类型支持
- 自动清除事件监听
三、完整代码实现
1. 创建指令文件 directives/debounceThrottle.ts
import type { App, Directive, DirectiveBinding } from 'vue'type ExecutableFunction = (...args: any[]) => void
type Strategy = 'debounce' | 'throttle'interface DirectiveOptions {strategy?: Strategydelay?: number
}// 策略模式实现
const strategyImplement = {debounce(fn: ExecutableFunction, delay: number) {let timer: NodeJS.Timeout | null = nullreturn (...args: any[]) => {if (timer) clearTimeout(timer)timer = setTimeout(() => fn(...args), delay)}},throttle(fn: ExecutableFunction, delay: number) {let lastExecTime = 0return (...args: any[]) => {const now = Date.now()if (now - lastExecTime >= delay) {fn(...args)lastExecTime = now}}}
}const debounceThrottleDirective: Directive = {mounted(el: HTMLElement, binding: DirectiveBinding<ExecutableFunction>) {const { value: fn } = bindingconst { strategy = 'debounce', delay = 300 }: DirectiveOptions = binding.modifiers || {}if (typeof fn !== 'function') {throw new Error('v-debounce-throttle requires a function as the value')}// 通过策略模式选择实现const executor = strategyImplement[strategy](fn, delay)// 存储到元素属性以便后续更新和卸载el._debounceThrottleHandler = executorel.addEventListener('click', executor)},updated(el, binding) {// 当参数变化时重新绑定el.removeEventListener('click', el._debounceThrottleHandler)debounceThrottleDirective.mounted(el, binding)},unmounted(el) {el.removeEventListener('click', el._debounceThrottleHandler)delete el._debounceThrottleHandler}
}// 扩展HTMLElement类型声明
declare global {interface HTMLElement {_debounceThrottleHandler?: (...args: any[]) => void}
}export function setupDebounceThrottleDirective(app: App) {app.directive('debounce-throttle', debounceThrottleDirective)
}
2. 在 main.ts 中注册
import { createApp } from 'vue'
import App from './App.vue'
import { setupDebounceThrottleDirective } from './directives/debounceThrottle'const app = createApp(App)
setupDebounceThrottleDirective(app)
app.mount('#app')
四、使用示例
1. 基础用法(默认防抖300ms)
<template><button v-debounce-throttle="handleClick">提交</button>
</template>
2. 指定节流模式
<button v-debounce-throttle.throttle="handleScroll">滚动处理</button>
3. 自定义延迟时间
<input v-debounce-throttle:input.throttle="handleInput"@input="(e) => $emit('update:modelValue', e.target.value)"
/>
五、关键实现解析
- 策略模式:通过对象字面量实现不同策略的快速切换
- 类型安全:使用TS接口规范参数类型
- 内存管理:在unmounted阶段自动移除监听
- 参数更新处理:updated生命周期实现动态参数更新
- 元素属性扩展:通过HTMLElement接口扩展存储处理方法
六、常见应用场景
- 搜索框输入联想(防抖)
- 防止按钮重复点击(节流)
- 滚动事件处理(节流)
- 窗口resize事件(防抖)
- canvas绘图高频事件(节流)
七、总结
通过封装这个自定义指令,我们实现了:
- ✅ 统一的防抖/节流处理逻辑
- ✅ 灵活的策略和参数配置
- ✅ 完善的TS类型支持
- ✅ 自动化的内存管理
在项目中合理使用可以有效提升应用性能,同时保持代码的整洁和可维护性。后续可以继续扩展支持更多事件类型和配置项,打造更强大的指令库。
相关文章:
Vue3+TypeScript 封装一个好用的防抖节流自定义指令
一、前言:为什么需要防抖节流? 在前端开发中,高频触发的事件(如滚动、输入、点击等)容易导致性能问题。防抖(debounce) 和 节流(throttle) 是两种常用的优化手段&#x…...
HarmonyOS+Django实现图片上传
话不多说,直接看代码: HarmonyOS部分代码 import { router } from "kit.ArkUI" import PreferencesUtil from "../utils/PreferencesUtil" import { photoAccessHelper } from "kit.MediaLibraryKit" import fs from oh…...
vscode 版本
vscode官网 Visual Studio Code - Code Editing. Redefined 但是官网只提供最新 在之前的版本就要去github找了 https://github.com/microsoft/vscode/releases 获取旧版本vscode安装包的方法_vscode 老版本-CSDN博客...
Python 爬虫实战案例 - 获取拉勾网招聘职位信息
引言 拉勾网,作为互联网招聘领域的佼佼者,汇聚了海量且多样的职位招聘信息。这些信息涵盖了从新兴科技领域到传统行业转型所需的各类岗位,无论是初出茅庐的应届生,还是经验丰富的职场老手,都能在其中探寻到机遇。 对…...
结构型模式---外观模式
概念 外观模式是一种结构型设计模式,它的核心思想是为复杂的子系统提供一个统一的接口,简化客户端与子系统的交互。外观模式通过引入一个高层接口,隐藏子系统的复杂性,使客户端更容易使用。 适用场景 用于客户端无需具体操作子…...
Docker数据卷操作实战
什么是数据卷 数据卷 是一个可供一个或多个容器使用的特殊目录,它绕过 UFS,可以提供很多有用的特性: 数据卷 可以在容器之间共享和享用对 数据卷 的修改立马生效对 数据卷 的更新,不会影响镜像数据卷 默认会一直存在,即时容器被…...
技术速递|Copilot Usage Advanced Dashboard 教程
作者:Xuefeng Yin 排版:Alan Wang Copilot Usage Advanced Dashboard 是为了充分利用 GitHub Copilot API 中的几乎所有数据,用到的 API 有: List teams of an onganization Get a summary of Copilot metrics for a team Get C…...
【Python爬虫(90)】以Python爬虫为眼,洞察金融科技监管风云
【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取,还涉及数据处理与分析。无论是新手小白还是进阶开发…...
Shell学习(1/6) 教程-变量
一、教程 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务。 Shell…...
《Qt窗口动画实战:Qt实现呼吸灯效果》
Qt窗口动画实战:Qt实现呼吸灯效果 在嵌入式设备或桌面应用中,呼吸灯效果是一种常见且优雅的UI动画,常用于指示系统状态或吸引用户注意。本文将介绍如何使用Qt动画框架实现平滑的呼吸灯效果。 一、实现原理 利用Qt自带的动画框架来实现&…...
RabbitMQ系列(六)基本概念之Routing Key
在 RabbitMQ 中,Routing Key(路由键) 是用于将消息从交换机(Exchange)路由到指定队列(Queue)的关键参数。其核心作用是通过特定规则匹配绑定关系,确保消息被正确分发。以下是其核心机…...
Spring Boot 集成 Kafka
在现代软件开发中,分布式系统和微服务架构越来越受到关注。为了实现系统之间的异步通信和解耦,消息队列成为了一种重要的技术手段。Kafka 作为一种高性能、分布式的消息队列系统,被广泛应用于各种场景。而 Spring Boot 作为一种流行的 Java 开…...
CentOS中shell脚本对多台机器执行下载安装
1.建立免密ssh连接 详情见这篇: CentOS建立ssh免密连接(含流程剖析)-CSDN博客 2.脚本编写 我这里只是简单写了个demo进行演示,如果服务器很多可以先暂存成文件再逐行读取host进行连接并执行命令 用node1去ssh连接node2和node…...
浅析eBPF
目录 一、eBPF 原理 二、eBPF 已可投入使用的场景 三、eBPF 与 Jaeger/Zipkin 的区别及先进性 四、使用 eBPF 的开源软件 五、开源软件的局限性或待实现功能 猫哥说 一、eBPF 原理 eBPF (extended Berkeley Packet Filter) 是一种内核技术,允许用户在内核空间…...
HTML 基础 (快速入门)详细步骤和示例
目录 创建基本的 HTML 文件 添加内容到页面 页面布局与链接 HTML(超文本标记语言)是构建网页的基础技术,以下是 HTML 基础的详细步骤和示例: 创建基本的 HTML 文件 步骤一:新建文件 在本地计算机上选择一个合适的…...
力扣-动态规划-139 单词拆分
思路 dp数组定义:用wordDict数组可以完成不超过j的字符串的可能为dp[j]递推公式: tmp s.substr(j - wordDict[i].size(), wordDict[i].size()); dp[j] (dp[j - wordDict[i].size()] && wordDict[i] tmp) || dp[j]; dp数组初始化:…...
建筑能耗监测系统数据采集装置 物联网网关功能参数介绍
安科瑞刘鸿鹏 摘要 随着物联网(IoT)技术的迅猛发展,现代物联网系统的规模和复杂度不断增加,各种智能设备和传感器的广泛应用为数据采集和分析提供了丰富的信息源。然而,面对不同协议、标准和通信方式的设备ÿ…...
vue深拷贝:1、使用JSON.parse()和JSON.stringify();2、使用Lodash库;3、使用深拷贝函数(采用递归的方式)
文章目录 引言三种方法的优缺点在Vue中,实现数组的深拷贝I JSON.stringify和 JSON.parse的小技巧深拷贝步骤缺点:案例1:向后端请求路由数据案例2: 表单数据处理时复制用户输入的数据II 使用Lodash库步骤适用于复杂数据结构和需要处理循环引用的场景III 自定义的深拷贝函数(…...
ES 删除index 的curl
以下是使用 `curl` 命令删除 Elasticsearch 索引的格式和示例: ### 基本格式 ```bash curl -XDELETE "http://<node-ip|hostname>:9200/<index-name>" ``` - `<node-ip|hostname>`:Elasticsearch 节点的 IP 地址或主机名。 - `<index-name&g…...
游戏引擎学习第124天
仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾/复习 今天是继续完善和调试多线程的任务队列。之前的几天,我们已经介绍了多线程的一些基础知识,包括如何创建工作队列以及如何在线程中处理任务。今天,重点是解决那些我们之前没有注意到…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
免费数学几何作图web平台
光锐软件免费数学工具,maths,数学制图,数学作图,几何作图,几何,AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南
在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...
前端打包工具简单介绍
前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry(入口) 指定应用的起点文件,比如 src/index.js。 Module(模块) Webpack 把项目当作模块图,模块可以是 JS、CSS、图片等…...
Ubuntu 可执行程序自启动方法
使用 autostart(适用于桌面环境) 适用于 GNOME/KDE 桌面环境(如 Ubuntu 图形界面) 1. 创建 .desktop 文件 sudo vi ~/.config/autostart/my_laser.desktop[Desktop Entry] TypeApplication NameMy Laser Program Execbash -c &…...
