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

vue中使用lodash的debounce(防抖函数)

1、安装

npm i --save lodash.debounce

2、引入

import debounce from 'lodash.debounce'

3、使用

<van-search v-model="searchValue" placeholder="输入姓名或工号" @input='handleInput' />

第一种:

handleInput: debounce(function (val) {console.log(val)
}, 200)

第二种:

handleInput(val) {console.log(val)
}
created() {this.handleInput = debounce(this.handleInput, 200) // 搜索框防抖
}

这两种使用方式效果一样

观察者防抖:

<template><input v-model="value" type="text" /><p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {data() {return {value: "",};},watch: {value(...args) {this.debouncedWatch(...args);},},created() {this.debouncedWatch = debounce((newValue, oldValue) => {console.log('New value:', newValue);}, 500);},beforeUnmount() {this.debouncedWatch.cancel();},
};
</script>

事件处理器防抖:

<template><input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {created() {this.debouncedHandler = debounce(event => {console.log('New value:', event.target.value);}, 500);},beforeUnmount() {this.debouncedHandler.cancel();}
};
</script>

为什么不在method中写好方法,在template中直接调用,就像这样

<template><input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {methods: {// Don't do this!debouncedHandler: debounce(function(event) {console.log('New value:', event.target.value);}, 500)}
};
</script>

组件使用 export default { … } 导出的 options 对象,包括方法,会被组件实例重用。

如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

相关文章:

vue中使用lodash的debounce(防抖函数)

1、安装 npm i --save lodash.debounce2、引入 import debounce from lodash.debounce3、使用 <van-search v-model"searchValue" placeholder"输入姓名或工号" inputhandleInput />第一种&#xff1a; handleInput: debounce(function (val) {c…...

什么是耐环境环形光源

耐环境环形光源是一种专为工业视觉系统设计的光源&#xff0c;能够在恶劣环境下稳定工作。以下是其主要特点和应用&#xff1a; 特点 耐用性&#xff1a;外壳坚固&#xff0c;通常采用金属或高强度塑料&#xff0c;能承受冲击、振动和温度变化。 防护等级&#xff1a;具备高IP防…...

3dtiles——Cesium ion for Autodesk Revit Add-In插件

一、说明&#xff1a; Cesium已经支持3dtiles的模型格式转换&#xff1b; 可以从Cesium官方Aesset中上传gltf等格式文件转换为3dtiles&#xff1b; 也可以下载插件&#xff08;例如revit-cesium插件&#xff09;转换并自动上传到Cesium官方Aseet中。 Revit转3dtiles插件使用…...

Edge浏览器清理主页

我们都知道&#xff0c;Microsoft Edge浏览器是微软创造的搜索浏览器&#xff0c;Windows10、11自带。但是你可以看到&#xff0c;每次你打开Edge浏览器的时候都可以看到许多的广告&#xff0c;如图&#xff1a; 导致打开Edge浏览器的时候会遭受卡顿&#xff0c;广告骚扰&#…...

leetcode刷题第十天——栈与队列Ⅱ

本次刷题顺序是按照卡尔的代码随想录中给出的顺序 1047. 删除字符串中的所有相邻重复项 char* removeDuplicates(char* s) {int len strlen(s);char* tmp malloc(sizeof(char) * (len 1));int top -1, idx 0;while(idx < len) {if(top -1) tmp[top] s[idx];else {i…...

硬修复(hPPR)与软修复(sPPR)

什么是PPR? PPR(Post Package Repair)是一种内存修复技术,主要用于修复DRAM(包括LPDDR4、DDR4等)中的存储单元故障。它通过在封装后对内存芯片进行修复,提高良率和可靠性,减少因制造缺陷导致的内存失效。 想象一下,你买了一袋苹果,有些苹果表面可能有个小斑点或者磕…...

filebeat抓取nginx日志

目录 一、抓取普通的应用输出日志到elasticsearch 二、抓取nginx日志输出到ElasticSearch 2.1、nginx.conf设定日志输出为JSON格式 2.2、nginx.conf设定日志按天输出文件 2.3、抓取Nginx JSON到ElasticSearch配置 一、抓取普通的应用输出日志到elasticsearch - type: log…...

TLQ-CN10.0.2.0 (TongLINK/Q-CN 集群)部署指引 (by lqw)

文章目录 安装准备虚拟机部署部署zk集群安装zk集群启动zk集群初始化元数据&#xff08;zk&#xff09;关闭zk集群 部署BookKeeper集群安装BookKeeper集群初始化元数据&#xff08;bk&#xff09;启动BookKeeper停止 BookKeeper 部署Brokers集群安装Brokers集群启动 broker停止 …...

第 14 天:UE5 C++ 与蓝图(Blueprint)交互!

&#x1f3af; 目标&#xff1a; ✅ 了解 C 与蓝图&#xff08;Blueprint&#xff09;交互的方式 ✅ 在 C 中调用蓝图函数 ✅ 让蓝图访问 C 变量和方法 ✅ 使用 UFUNCTION、UPROPERTY 进行蓝图暴露 ✅ 提高开发效率&#xff0c;让 C 和蓝图开发者高效协作 1️⃣ 为什么要让 C…...

小初高各学科教材,PDF电子版下载

链接&#xff1a;https://pan.quark.cn/s/7c2125f648e2 小初高中电子课本资料pdf合集 高中各科教材 &#xff08;部分举例&#xff09; - 语文&#xff1a;新人教版、旧人教版、苏教版等 - 数学&#xff1a;人教A版、沪教版、鄂教版等 - 英语&#xff1a;重大版、人教版…...

Trader Joe‘s EDI 需求分析

Trader Joes成立于1967年&#xff0c;总部位于美国加利福尼亚州&#xff0c;是一家独特的零售商&#xff0c;专注于提供高质量且价格合理的食品。公司经营范围涵盖了各类杂货、冷冻食品、健康食品以及独特的本地特色商品。 EDI需求分析 电子数据交换&#xff08;EDI&#xff…...

python class详解

在 Python 中&#xff0c;class 是用来创建新的数据类型&#xff0c;即对象的蓝图。类可以包含属性&#xff08;变量&#xff09;和方法&#xff08;函数&#xff09;&#xff0c;它们定义了对象的状态和行为。以下是 Python 类的基本概念和用法的详细解释&#xff1a; 定义类…...

基于LVS负载均衡练习

对比 LVS 负载均衡群集的 NAT 模式和 DR 模式&#xff0c;比较其各自的优势。 NAT模式&#xff0c;全称是网络地址转换模式。NAT模式下&#xff0c;负载均衡器&#xff08;Director&#xff09;会修改请求和响应的IP地址。客户端的请求先到达Director&#xff0c;Director将请…...

在 rtthread中,rt_list_entry (rt_container_of) 已知结构体成员的地址,反推出结构体的首地址

rt_list_entry (rt_container_of)宏定义&#xff1a; /*** rt_container_of - return the start address of struct type, while ptr is the* member of struct type.*/ #define rt_container_of(ptr, type, member) \((type *)((char *)(ptr) - (unsigned long)(&((type *…...

数组_二分查找

数组_二分查找 一、leetcode-572二、题解1.代码2.思考 一、leetcode-572 二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则…...

VUE环境搭建

node.js安装 node npm – node Package Management 安装完成后&#xff0c;需要设置&#xff1a; npm config set prefix "D:\nodejs"注意&#xff1a;“D:\nodejs” 此处为自己安装的node.js路径。管理员身份运行 切换镜像源 npm config set registry https://r…...

MATLAB图像处理:Sobel、Roberts、Canny等边缘检测算子

边缘是图像中像素值剧烈变化的区域&#xff0c;反映了目标的轮廓、纹理等关键信息。边缘检测是图像分割、目标识别等任务的基础。本文将系统解析 六种经典边缘检测算子 的数学原理、实现方法及适用场景&#xff0c;并给出完整的MATLAB代码示例和对比分析。 1. 边缘检测基础 1…...

C++ 标准库常见容器

容器类型类型分类特点示例代码vector序列容器动态数组&#xff0c;支持随机访问&#xff0c;末尾操作效率高std::vector v {1, 2, 3}; v.push_back(4);deque序列容器双端队列&#xff0c;支持两端操作和随机访问std::deque d {1, 2, 3}; d.push_front(0);list序列容器双向链表…...

Ubuntu+Laravel+MQ+Supervisor队列系统搭建流程

1、安装MQ环境 sudo apt install -y rabbitmq-server sudo systemctl enable rabbitmq-server --now 2、进入laravel项目&#xff0c;安装MQ队列驱动 composer require vladimir-yuldashev/laravel-queue-rabbitmq 3、配置 .env QUEUE_CONNECTIONrabbitmq RABBITMQ_HOST12…...

力扣100. 相同的树(利用分解思想解决)

Problem: 100. 相同的树 文章目录 题目描述思路Code 题目描述 思路 题目要求判断两个二叉树是否完全相同&#xff0c;而此要求可以利用问题分解的思想解决&#xff0c;即判断当前节点的左右子树是否完全相同&#xff0c;而在二叉树问题分解的一般题目中均会带有返回值&#xff…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...