Question

Vue.js文档建议使用lodash的debounce函数来消除昂贵的方法，这些方法已经成功实现。但是偶然地，我不想立即采取行动，Lodash的文档说：

去抖动功能带有取消方法来取消延迟的函数调用，并带有刷新方法来立即调用它们。

但是就是这样。没有信息如何调用flush方法。我找到了this博客文章，但不确定如何在Vue.js组件中实现它。

这是我目前在Vue.js组件中的内容（codepen）：

<template> <input type='text' @keyup="change" @keyup.enter="changeNow"> </template> <script> export default { name: "MyComponent", methods: { change: _.debounce(function() { console.log("changing..."); }, 250), changeNow: function() { this.change(); this.change.flush(); } } }; </script>

change已正确消除抖动，并且按预期仅在键入后运行一次。但是，changeNow会引发以下错误：

未捕获的TypeError：this.change.flush不是函数

任何有关如何实施此建议的建议将不胜感激！

Answer 1

由于vue处理“方法”部分的方式出现古怪，您遇到了问题。

默认情况下，Vue仅希望方法列表中的函数为，然后它循环遍历这些方法并对其调用.bind以确保this始终有效。 < / p>

由于这种循环，您只能访问该函数本身，而不能访问这些函数的其他成员。

如果将change方法添加到数据部分，则可以访问其属性并调用flush方法：

var app = new Vue({
    el: "#app",    
      data: {
            change: _.debounce(function() {
        console.log("changing...");
      }.bind(this), 1000),
    },
    methods: {
      changeNow: function() {
        this.change.flush();
      }
    }
  });

https://codepen.io/anon/pen/gBZrrj?editors=1111

Answer 2

如果将方法定义移动到创建的钩子上，如the docs中的示例，这似乎起作用。

var app = new Vue({
    el: "#app",
    created() {
      this.change = _.debounce(function() {
        console.log("changing...");
      }, 1000);
      this.changeNow = function() {
        console.log("now...")
        this.change();
        this.change.flush();
      };
    }
  });

Codepen

使用Vue.js如何刷新用lodash消除的方法？

2 个答案: