Vuejs 2：debounce 不适用于手表选项

Question

当我在 VueJs 中去抖动这个函数时，如果我提供毫秒数作为原语，它就可以正常工作。但是，如果我提供它作为对道具的引用，它会忽略它。

这是道具的缩写版本：

props : {
    debounce : {
        type : Number,
        default : 500
    }
}

这是不起作用的监视选项：

watch : {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, this.debounce)
}

这是一个确实有效的监视选项：

watch : {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, 500)
}

它怀疑这是一个范围问题，但我不知道如何解决它。如果我按如下方式替换 watch 方法...：

watch : {
    term : function () {
        console.log(this.debounce);
    }
}

...我得到了正确的去抖动值 (500) 出现在控制台中。

Answer 1

@Bert 答案的另一个变体是在 中构建观察者的函数created()，

// SO: Vuejs 2: debounce not working on a watch option

console.clear()

Vue.component("debounce",{
  props : {
    debounce : {
      type : Number,
      default : 500
    }
  },
  template:`
    <div>
      <input type="text" v-model="term">
    </div>
  `,
  data(){
    return {
      term: "",
      debounceFn: null
    }
  },
  created() {
    this.debounceFn = _.debounce( () => {
      console.log('Debounced term: ' + this.term);
    }, this.debounce)
  },
  watch : {
    term : function () {
      this.debounceFn();
    }
  },
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<div id="app">
  <debounce :debounce="2000"></debounce>
</div>

CodePen上的示例