使用 Vue.js 如何刷新使用 lodash 去抖動的方法？

Question

Vue.js 文檔建議使用 lodash 的 debounce 函數來消除昂貴的方法，我已經成功實現了。 但有時我不想立即采取行動，lodash 的文檔說：

debounced 函數帶有一個取消延遲函數調用的取消方法和一個立即調用它們的刷新方法。

但就是這樣。 沒有關於如何調用 flush 方法的信息。 我找到了這篇博文，但我不確定如何在 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始終有效。

因為這種循環，您只能訪問函數本身，而不能訪問這些函數具有的其他成員。

如果將 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

如果您將方法定義移動到創建的鈎子中，這似乎有效，如文檔中的示例所示。

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

密碼筆