以下代码没有经过检查，但我想解释更多关于 debounce 以及 Vue 中“v-on”或“@”事件的工作原理。
在您的<input> 标签上，您可以使用@dziraf 解释的<input @input="fetchData" v-model="name">，并为额外的变量做一些额外的工作。或者...
要发送参数，您只需先显式包含“EVENT”变量（在 Vue.js 事件中，它的名称是 $event），然后是您选择添加的任何变量：
<input
@input="fetchData($event, 'Custom Values', customVariables)"
v-model="name"
>
现在您可以访问发送到“您的函数”或“去抖函数”（它只是您发送的任何函数的包装版本）的所有变量：
methods: {
fetchData:
_.debounce(
(e, customVariable1=undefined, customVariable2=undefined) => {
console.log('Input argument is: ' + e.target.value);
}, 500),
...
提示： 2 个 customVariables 中的“=undefined”用于使它们成为可选。
警告：如果您将在单个页面上实现此组件的多个实例，请小心，由于某些初始 Vue 生命周期中的一些封装问题，不建议在 methods: 中使用您的 debounce 函数钩子。此外，我相信当您进行其他一些用户交互并在延迟结束之前停止该功能时，如果需要，您不能调用 .cancel() 方法。
建议将函数保存到created() 生命周期中的变量而不是method:：
created() {
this.fetchData = _.debounce(
(e, customVariable1=undefined, customVariable2=undefined) => {
console.log('Input argument is: ' + e.target.value);
}, 500);
}
现在，您可以调用 .cancel() 方法正确地进行垃圾收集：
beforeDestroy() {
this.fetchData.cancel();
}
或者，有一个“取消”按钮或从另一个 UI 元素调用：
<button @click="fetchData.cancel();">Cancel the Request</button>
你可以试试这段代码，看看封装的细微差别：
HTML
<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>Using debounce as a data() variable declared in created():</div>
<create-change ref="counter1"></create-change>
<create-change ref="counter2"></create-change>
<create-change ref="counter3"></create-change>
<create-change ref="counter4"></create-change>
<br />
<br />
<div>Using debounce as a Method:</div>
<method-change ref="counter5"></method-change>
<method-change ref="counter6"></method-change>
<method-change ref="counter7"></method-change>
<method-change ref="counter8"></method-change>
</div>
JS
Vue.component('create-change', {
template:
`
<button @click="changeContent($event,'any custom value')">
Click to change my value: {{ i }}
</button>
`,
data: function(){
return { i: 0 };
},
created() {
this.changeContent = _.debounce(function(e, val=0){
if (val) { this.i = val } // or reference a method here
}, 1000)
},
});
Vue.component('method-change', {
template:
`
<button @click="changeContent($event,'any custom value')">
Click to change my value: {{ i }}
</button>
`,
data: function(){
return { i: 0 };
},
methods: {
// WARNING: Can have encapsulation issues
changeContent: _.debounce(function(e, val=0){
if (val) { this.i = val }
}, 1000),
},
});
new Vue({
el: '#app',
mounted () {
this.$refs.counter1.changeContent(null,1);
this.$refs.counter2.changeContent(null,2);
this.$refs.counter3.changeContent(null,3);
this.$refs.counter4.changeContent(null,4);
this.$refs.counter5.changeContent(null,5);
this.$refs.counter6.changeContent(null,6);
this.$refs.counter7.changeContent(null,7);
this.$refs.counter8.changeContent(null,8);
}
});
CSS
#app {
margin: 20px;
font-size: 20px;
font-family: Arial, sans-serif;
}