在 Vue 中计算的 Debounce properties/getters
Debounce computed properties/getters in Vue
我似乎无法去除 (lodash) 计算属性或 vuex getter。去抖功能总是return未定义。
https://jsfiddle.net/guanzo/yqk0jp1j/2/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ textDebounced }} </div>
</div>
JS:
new Vue({
el:'#app',
data:{
text:''
},
computed:{
textDebounced: _.debounce(function(){
return this.text
},500),
textComputed(){
return this.text
}
}
})
我不明白为什么去抖功能在计算 属性 上不起作用。但是,另一种解决方案是将去抖动放在 methods
部分的函数上,并通过 watch
.
调用它
https://jsfiddle.net/vsc4npv3/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ debouncedText }} </div>
</div>
JavaScript:
var x = new Vue({
el:'#app',
data:{
text:'',
debouncedText: ''
},
watch: {
text: function (val) {
this.debouncer();
}
},
computed:{
textComputed(){
return this.text;
}
},
methods: {
debouncer: _.debounce(function(){
this.debouncedText = this.text;
},500)
}
})
正如我在评论中提到的那样,去抖动本质上是一种异步操作,因此不能 return 一个值。根据您的需要,您可能希望在 input 端进行去抖动。 text
和textComputed
中的值不会有区别,但是如果你v-model="textComputed"
,这个值设置会去抖动。
如果您特别想要一个变量的去抖动版本,mrogers 提供了一个很好的解决方案。
var x = new Vue({
el: '#app',
data: {
text: 'start'
},
computed: {
textComputed: {
get() {
return this.text;
},
set: _.debounce(function(newValue) {
this.text = newValue;
}, 500)
}
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="app">
<div>
Debounced input:
<input v-model="textComputed">
</div>
<div>
Immediate input:
<input v-model="text">
</div>
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ text }} </div>
</div>
- 简单
- 无外部依赖(如
_.debounce
)
- 为 Vue 量身定制
import Vue from 'vue'
// Thanks to https://github.com/vuejs-tips/v-debounce/blob/master/debounce.js
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)
}
}
function debouncedProperty(delay) {
let observable = Vue.observable({ value: undefined });
return {
get() { return observable.value; },
set: debounce(function (newValue) { observable.value = newValue; }, delay)
}
}
// component
export default {
computed: {
myProperty: debouncedProperty(300),
},
}
我似乎无法去除 (lodash) 计算属性或 vuex getter。去抖功能总是return未定义。
https://jsfiddle.net/guanzo/yqk0jp1j/2/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ textDebounced }} </div>
</div>
JS:
new Vue({
el:'#app',
data:{
text:''
},
computed:{
textDebounced: _.debounce(function(){
return this.text
},500),
textComputed(){
return this.text
}
}
})
我不明白为什么去抖功能在计算 属性 上不起作用。但是,另一种解决方案是将去抖动放在 methods
部分的函数上,并通过 watch
.
https://jsfiddle.net/vsc4npv3/
HTML:
<div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ debouncedText }} </div>
</div>
JavaScript:
var x = new Vue({
el:'#app',
data:{
text:'',
debouncedText: ''
},
watch: {
text: function (val) {
this.debouncer();
}
},
computed:{
textComputed(){
return this.text;
}
},
methods: {
debouncer: _.debounce(function(){
this.debouncedText = this.text;
},500)
}
})
正如我在评论中提到的那样,去抖动本质上是一种异步操作,因此不能 return 一个值。根据您的需要,您可能希望在 input 端进行去抖动。 text
和textComputed
中的值不会有区别,但是如果你v-model="textComputed"
,这个值设置会去抖动。
如果您特别想要一个变量的去抖动版本,mrogers 提供了一个很好的解决方案。
var x = new Vue({
el: '#app',
data: {
text: 'start'
},
computed: {
textComputed: {
get() {
return this.text;
},
set: _.debounce(function(newValue) {
this.text = newValue;
}, 500)
}
}
})
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<div id="app">
<div>
Debounced input:
<input v-model="textComputed">
</div>
<div>
Immediate input:
<input v-model="text">
</div>
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ text }} </div>
</div>
- 简单
- 无外部依赖(如
_.debounce
) - 为 Vue 量身定制
import Vue from 'vue'
// Thanks to https://github.com/vuejs-tips/v-debounce/blob/master/debounce.js
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)
}
}
function debouncedProperty(delay) {
let observable = Vue.observable({ value: undefined });
return {
get() { return observable.value; },
set: debounce(function (newValue) { observable.value = newValue; }, delay)
}
}
// component
export default {
computed: {
myProperty: debouncedProperty(300),
},
}