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

1、安装

go 复制代码
npm i --save lodash.debounce

2、引入

go 复制代码
import debounce from 'lodash.debounce'

3、使用

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

第一种:

go 复制代码
handleInput: debounce(function (val) {
  console.log(val)
}, 200)

第二种:

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

这两种使用方式效果一样

观察者防抖:

go 复制代码
<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>

事件处理器防抖:

go 复制代码
<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中直接调用,就像这样

go 复制代码
<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 --- 这会导致防抖出现故障。

相关推荐
moz与京2 分钟前
【附JS、Python、C++题解】Leetcode面试150题(9)——三数之和
javascript·c++·leetcode
小小鸭程序员22 分钟前
NPM版本管理终极指南:掌握依赖控制与最佳实践
java·前端·spring·npm·node.js
KL's pig/猪头/爱心/猪头32 分钟前
lws-minimal-ws-server前端分析
前端
TheK32 分钟前
【源码分析】 一文搞清楚React全流程
前端
渔樵江渚上34 分钟前
使用 Web Worker 解析 CSV 文件
前端·javascript·面试
悟空和大王34 分钟前
win11下使用wsl2 + docker 打造前端开发环境
前端
Silence_xl35 分钟前
nvm安装node版本
前端
星光不问赶路人37 分钟前
梳理字节数据(Uint8Array)转换成字符串的4种方法
前端
前端卧龙人38 分钟前
如何通过 Nginx 实现前端与后端的协同部署
前端
simple丶38 分钟前
领域模型 DSL设计与解析引擎
前端