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 — 这会导致防抖出现故障。