vue使用lodash中debounce(防抖函数)的几种方法实现
作者：晚时之秋
本文主要介绍了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(防抖函数)的几种方法实现的文章就介绍到这了,更多相关vue debounce防抖内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！