Vue 中的去抖计算属性/getter

Question

我似乎无法去除 (lodash) 计算属性或 vuex getter。去抖功能总是返回未定义。

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

HTML:

 <div id="app">
  <input v-model="text">
  <div>computed: {{ textComputed }} </div>
  <div>debounced: {{ textDebounced }} </div>
</div>

记者：

 new Vue({
    el:'#app',
  data:{
    text:''
  },
  computed:{
    textDebounced: _.debounce(function(){
      return this.text
    },500),
    textComputed(){
        return this.text
    }
  }

})

原文由 Eric Guan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如我在评论中提到的，去抖动本质上是一种异步操作，因此无法返回值。根据您的需要，您可能希望在 输入 端进行去抖动。 —中的值与 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>

原文由 Roy J 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我不明白为什么 debounce 函数对计算属性不起作用。但是，另一种解决方案是将去抖动放在 methods 部分中的函数上，并通过 watch 调用它。

https://jsfiddle.net/vsc4npv3/

HTML:

 <div id="app">
<input v-model="text">
<div>computed: {{ textComputed }} </div>
<div>debounced: {{ debouncedText }} </div>
</div>

脚本：

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

})

原文由 mrogers 发布，翻译遵循 CC BY-SA 3.0 许可协议