我在Vue模板中有一个简单的输入框,我想使用debounce或多或少像这样:
<input type="text" v-model="filterKey" debounce="500">
然而,在Vue 2中debounce属性已被弃用。建议只说:“使用v-on:输入+第三方反弹功能”。
如何正确地实现它?
我尝试使用lodash, v-on:input和v-model来实现它,但我想知道是否有可能没有额外的变量。
在模板:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
然后在计算道具中使用过滤键。
在方法中分配debounce可能会很麻烦。所以不要这样:
// Bad
methods: {
foo: _.debounce(function(){}, 1000)
}
你可以试试:
// Good
created () {
this.foo = _.debounce(function(){}, 1000);
}
如果您有一个组件的多个实例,这就会成为一个问题——类似于数据应该是一个返回对象的函数。每个实例都需要自己的debounce函数,如果它们被认为是独立的。
这里有一个问题的例子:
Vue.component('counter', {
template: '<div>{{ i }}</div>',
data: function(){
return { i: 0 };
},
methods: {
// DON'T DO THIS
increment: _.debounce(function(){
this.i += 1;
}, 1000)
}
});
new Vue({
el: '#app',
mounted () {
this.$refs.counter1.increment();
this.$refs.counter2.increment();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script>
<div id="app">
<div>Both should change from 0 to 1:</div>
<counter ref="counter1"></counter>
<counter ref="counter2"></counter>
</div>
下面是一个Vue 2组件示例,演示了如何使用debounce。
<template>
<div>
<v-btn @click="properDebounceMyMethod">Proper debounce</v-btn>
<v-btn @click="notWorkingDebounceMyMethod">!debounce</v-btn>
<v-btn @click="myMethod">normal call</v-btn>
</div>
</template>
<script lang="ts" >
import { defineComponent } from '@vue/composition-api';
import { debounce } from 'lodash';
export default defineComponent({
name: 'DebounceExample',
created() {
// debounce instance method dynamically on created hook
this.properDebounceMyMethod = debounce(this.properDebounceMyMethod, 500);
},
methods: {
properDebounceMyMethod(){
this.myMethod();
},
notWorkingDebounceMyMethod() {
debounce(this.myMethod, 500);
},
myMethod() {
console.log('hi from my method');
},
}
});
</script>
请注意,我在接受的答案之前发布了这个答案。这不是
正确的。这只是从解决方案向前迈进了一步
的问题。我编辑了已接受的问题,以显示作者的实现和我使用的最终实现。
基于注释和链接迁移文档,我对代码做了一些更改:
在模板:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本:
watch: {
searchInput: function () {
this.debounceInput();
}
},
设置过滤器键的方法保持不变:
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
这看起来好像少了一个调用(只是v-model,而不是v-on:input)。
短版本使用箭头函数,默认延迟值
文件:debounce.js in ex: (import debounce from '../../跑龙套/防反跳”)
export default function (callback, delay=300) {
let timeout = null
return (...args) => {
clearTimeout(timeout)
const context = this
timeout = setTimeout(() => callback.apply(context, args), delay)
}
}
2 Mixin选项
文件:debounceMixin.js
export default {
methods: {
debounce(func, delay=300) {
let debounceTimer;
return function() {
// console.log("debouncing call..");
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
// console.log("..done");
};
}
}
};
在vueComponent中使用:
<script>
import debounceMixin from "../mixins/debounceMixin";
export default {
mixins: [debounceMixin],
data() {
return {
isUserIdValid: false,
};
},
mounted() {
this.isUserIdValid = this.debounce(this.checkUserIdValid, 1000);
},
methods: {
isUserIdValid(id){
// logic
}
}
</script>
另一个选项,例子
Vue搜索输入反弹
我使用debounce NPM包并像这样实现:
<input @input="debounceInput">
methods: {
debounceInput: debounce(function (e) {
this.$store.dispatch('updateInput', e.target.value)
}, config.debouncers.default)
}
使用lodash和问题中的示例,实现如下所示:
<input v-on:input="debounceInput">
methods: {
debounceInput: _.debounce(function (e) {
this.filterKey = e.target.value;
}, 500)
}
我可以用很少的实现来使用debounce。
我使用Vue 2.6.14与boostrap-vue:
把这个pkg加到你的包裹里。json: https://www.npmjs.com/package/debounce
将此添加到main.js:
import { debounce } from "debounce";
Vue.use(debounce);
在我的组件中,有这样的输入:
<b-form-input
debounce="600"
@update="search()"
trim
id="username"
v-model="form.userName"
type="text"
placeholder="Enter username"
required
>
</b-form-input>
它所做的就是调用search()方法,而搜索方法使用表单。执行搜索的用户名。