去抖动 Vue 中的计算属性/getter [英] Debounce computed properties/getters in Vue

问题描述

我似乎无法去抖动 (lodash) 计算属性或 vuex getter.去抖动的函数总是返回 undefined.

https://jsfiddle.net/guanzo/yqk0jp1j/2/

HTML:

<input v-model="text"><div>计算:{{ textComputed }} </div><div>去抖动:{{ textDebounced }} </div>

JS:

new Vue({el:'#app',数据:{文本:''},计算:{textDebounced: _.debounce(function(){返回 this.text},500),文本计算(){返回 this.text}}})

解决方案

正如我在评论中提到的，去抖动是一种固有的异步操作，因此无法返回值.根据您的需要，您可能希望在 输入 端去抖动.text中的值和textComputed中的值没有区别，但是如果你v-model="textComputed"，值设置将去抖动.

如果您特别想要一个变量的去抖动版本，mrogers 提供了一个很好的解决方案.

var x = new Vue({el: '#app',数据: {文字:'开始'},计算:{文本计算:{得到() {返回 this.text;},设置:_.debounce(函数(新值){this.text = newValue;}, 500)}}})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></脚本><script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script><div id="应用程序"><div>去抖动输入:<input v-model="textComputed">

<div>立即输入:<input v-model="text">

<div>计算:{{ textComputed }} </div><div>去抖动:{{ text }} </div>

I can't seem to debounce (lodash) computed properties or vuex getters. The debounced functions always return undefined.

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
    }
  }

})

解决方案

As I mention in my comment, debouncing is an inherently asynchronous operation, and so cannot return a value. Depending on your needs, you might want to debounce on the input side. There will be no difference between the value in text and that in textComputed, but if you v-model="textComputed", the value setting will be debounced.

If you specifically want a debounced version of a variable, mrogers has given a good solution.

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>

这篇关于去抖动 Vue 中的计算属性/getter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！