4

当我在 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）出现在控制台中。

4

4 回答 4

6

@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上的示例

于 2017-11-09T19:01:21.963 回答
2

这里的主要问题是this.debounce在定义去抖函数时用作间隔。在_.debounce(...)运行时（当组件正在编译时），该函数尚未附加到 Vue，因此this不是Vue 并且将是未定义的。this.debounce在这种情况下，您需要在创建组件实例后定义手表。Vue 使您能够使用$watch来做到这一点。

我建议您将其添加到创建的生命周期处理程序中。

created(){
  this.unwatch = this.$watch('term', _.debounce((newVal) => {
     console.log('Debounced term: ' + this.term);
  }, this.debounce))
},
beforeDestroy(){
  this.unwatch()
}

请注意，代码还在unwatch组件被销毁之前调用 which 。这通常由 Vue 为您处理，但由于代码是手动添加手表，因此代码还需要管理删除手表。当然，您需要添加unwatch为数据属性。

这是一个工作示例。

console.clear()

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

new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <debounce :debounce="250"></debounce>
</div>

于 2017-11-08T13:51:28.147 回答
0

debounced method需要抽象，因为每次触发时我们都需要调用相同的函数watch。如果我们将debounced方法放在Vue computedorwatch属性中，它将每次更新。

const debouncedGetData = _.debounce(getData, 1000);

function getData(val){
  this.newFoo = val;
}

new Vue({
  el: "#app",
  template: `
    <div>
      <input v-model="foo" placeholder="Type something..." />
      <pre>{{ newFoo }}</pre>
    </div>
`,
    data(){
      return {
        foo: '',
        newFoo: ''
      }
    },
    watch:{
      foo(val, prevVal){
        debouncedGetData.call(this, val);
      }
    }
  
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app"></div>

祝你好运...

于 2019-01-19T10:38:16.300 回答
0 

new Vue({
  el: '#term',
  data: function() {
    return {
      term: 'Term',
      debounce: 1000
    }
  },
  watch: {
    term : _.debounce(function () {
        console.log('Debounced term: ' + this.term);
    }, this.debounce)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="term">
  <input v-model="term">
</div>

于 2017-11-08T10:00:13.713 回答