vue3 loadsh 防抖功能

loadsh 是一个工具库，我们通常使用 loadsh 的 debounce 函数处理防抖

官方API https://www.lodashjs.com/

简单使用方法

<template><input @change="onchange" />
</template><script setup lang="ts">
import { debounce } from "lodash";const onchange  = debounce(hello,500)function hello(e){console.log("hello world")console.log(e.target.value)
}
onUnmounted(() => {// 移除组件时，取消定时器onchange.cancel();
});</script>

注意几点

debounce 的第一个参数必须是 function 函数，不能传入箭头函数，否则 this 指向会出现问题
vue3 + ts 中，不能直接在 @change 里面写防抖函数，必须赋值给一个变量，否则同样会造成 this 指向问题

vue3 loadsh 防抖功能相关推荐

Vue3 组合式Api之customRef实现防抖功能
前言什么是防抖? 防抖就是对于频繁触发的事件添加一个延时同时设定一个最小触发间隔,如果触发间隔小于设定的间隔,则清除原来的定时,重新设定新的定时:如果触发间隔大于设定间隔,则保留原来的定时,并设置 ...
《Vue3+TS》开发一个自己的起始页
前言之前习惯使用的是百度的作为浏览器的首页,百度登录账号后可以在首页上收藏很多书签,但是近期因为使用不同电脑协同办公,导致一台电脑登录百度账号后,其它的电脑的百度会被提下线,这就很烦,还不如自己做个 ...
【Vue】新建一个Vue3项目
目录 1.新建vue项目 2.路径更改至新建的vue项目处 3.安装cnpm 4.cnpm安装vant3 5.安装babel-plugin 6.安装vue路由 7.安装axios 其他注意事项仅用于 ...
vue 后台返回的文件流进行预览_基于 Vue3+Ts 后台前端管理系统Vue3-Admin
今天再给大家分享一款超不错的Vue中后台管理系统Vue3Admin. vue3-admin 基于VueCli4+Ts+ElementUI构建的后台系统.采用组件化开发模式及Flex布局,支持移动端适配 ...
vue3.0环境搭建
安装最新版nodejs Node.jshttps://nodejs.org/zh-cn/安装过程非常傻瓜,一直下一步到完成 -------------------------------------- ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
VUE3.0 一.安装node.js、vue3.0脚手架
VUE3.0 一.安装node.js.vue3.0脚手架 1.安装nodejs 首先去官网下载nodejs 查看npm和node版本,出现版本号即安装成功. npm -v # 6.13.4node - ...
从Proxy到Vue3数据绑定
导言: 本菜鸡在Vue2没多久,结果就Vue3发布了.赶紧学习和体验了一番Vue3,发现和Vue2有较大不同.其中最让我印象深刻的是他们有一个叫ref和reactive的用来绑定和更新数据.然后再略微 ...
vue 组件以字符串插入_今日分享：vue3多层嵌套组件如何访问到最外层组件的数据？...
我们都知道在vue中父组件向子组件传参需要在组件使用的位置使用属性绑定的方式,然后在子组件中通过props接收父组件中传递过来的数据,如果涉及到多层组件嵌套我们需要涉及到好多次属性绑定和好多次prop ...

vue3 loadsh 防抖功能

简单使用方法

注意几点

vue3 loadsh 防抖功能相关推荐

最新文章

热门文章