我在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)
}
然后在计算道具中使用过滤键。
当前回答
下面是一个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)。
虽然这里几乎所有的答案都是正确的，如果有人正在寻找一个快速的解决方案，我有一个指令。 https://www.npmjs.com/package/vue-lazy-input
它适用于@input和v-model，支持自定义组件和DOM元素，debounce和throttle。
Vue.use(VueLazyInput) new Vue({ el: '#app', data() { return { val: 42 } }, methods:{ onLazyInput(e){ console.log(e.target.value) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/lodash/lodash.min.js"></script><!-- dependency --> <script src="https://unpkg.com/vue-lazy-input@latest"></script> <div id="app"> <input type="range" v-model="val" @input="onLazyInput" v-lazy-input /> {{val}} </div>
选项1:可重复使用，无deps
-如果在你的项目中需要不止一次，建议使用
/ helpers.js
export function debounce (fn, delay) {
var timeoutID = null
return function () {
clearTimeout(timeoutID)
var args = arguments
var that = this
timeoutID = setTimeout(function () {
fn.apply(that, args)
}, delay)
}
}
/ Component.vue
<script>
import {debounce} from './helpers'
export default {
data () {
return {
input: '',
debouncedInput: ''
}
},
watch: {
input: debounce(function (newVal) {
this.debouncedInput = newVal
}, 500)
}
}
</script>
Codepen
选项2:组件内，也没有deps
-建议一次性使用或用于小型项目
/ Component.vue
<template>
<input type="text" v-model="input" />
</template>
<script>
export default {
data: {
timeout: null,
debouncedInput: ''
},
computed: {
input: {
get() {
return this.debouncedInput
},
set(val) {
if (this.timeout) clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.debouncedInput = val
}, 300)
}
}
}
}
</script>
Codepen
如果你需要使用lodash的debounce函数来应用动态延迟:
props: {
delay: String
},
data: () => ({
search: null
}),
created () {
this.valueChanged = debounce(function (event) {
// Here you have access to `this`
this.makeAPIrequest(event.target.value)
}.bind(this), this.delay)
},
methods: {
makeAPIrequest (newVal) {
// ...
}
}
模板:
<template>
//...
<input type="text" v-model="search" @input="valueChanged" />
//...
</template>
注意:在上面的例子中，我做了一个搜索输入的例子，它可以用props中提供的自定义延迟调用API
public debChannel = debounce((key) => this.remoteMethodChannelName(key), 200)
vue-property-decorator
