Question

我正在尝试将Vue函数传递给lodash节流方法。难道我不能做这样的事吗？

当我尝试这样做时，我收到以下错误：

观察者的回调错误＆＃34;查询＆＃34;：＆＃34; TypeError：期望一个函数＆＃34;

观察

watch: {
    query() {
        throttle(this.autocomplete(), 400);
    }
}

方法

methods: {
    autocomplete() {}
}

即使我传递了函数引用，我仍然收到错误消息。如果我用匿名函数包装它，它就不会激发：

throttle(() => { this.autocomplete(); }, 400);

我刚检查过，autocomplete函数实际上似乎确实无法触发，不管它在顶部的示例中不是函数。

这里出了什么问题？

修改

Jsfiddle：http://jsfiddle.net/yMv7y/2780/

Answer 1

您传递的是this.autocomplete()（可能是undefined）的返回值，而不是函数引用。如果你想做后者，你必须省略括号：

watch: {
    query() {
        throttle(this.autocomplete, 400);
    }
}

Answer 2

工作方法：

＆＃13;

var demo = new Vue({
  el: '#demo',
  data: {
    query: ''
  },
  watch: {
    query: function() {
      this.autocomplete()
    }
  },
  methods: {
    autocomplete: _.throttle(function() {
      console.log('test');
    }, 50)
  }
})

＆＃13;

<script src="http://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

<div id="demo" v-cloak>
    <input type="text" v-model="query">
</div>

＆＃13;

正如@Bill Criswell评论的那样，

每次查询更改时都会创建一个限制函数。您想要不断调用与答案相同的节流功能下方。

Answer 3

我的猜测是你需要在变量中使用非调用的回调定义限制函数，然后将其作为函数调用：

var throttled = throttle(this.autocomplete, 400)
watch: {
    query() {
        throttled();
    }
}

花了很长时间试图找出那个......

通过vue传递方法给lodash提供了预期的功能＆＃39;

3 个答案: