Question

如何正确使用 Vue JS watch 和 lodash debounce

2017-07-18

45657

javascript vue.js vuejs2 lodash vuex

我正在使用 lodash 在组件上调用 debounce 函数，如下所示：

...
import _ from 'lodash';

export default {
    store,
    data: () => {
        return {
            foo: "",
        }
    },

    watch: {
        searchStr: _.debounce(this.default.methods.checkSearchStr(str), 100)
    },

    methods: {
        checkSearchStr(string) {
            console.log(this.foo) // <-- ISSUE 1
            console.log(this.$store.dispatch('someMethod',string) // <-- ISSUE 2
        }
    }
}

问题 1 是我的方法 checkSearchStr 不知道 foo
问题 2 是我的 store 也是 undefined

为什么我的方法在通过 _.debounce 调用时不知道 this ？正确的用法是什么？

Answer 1

您的监视应如下所示。

watch: {
    searchStr: _.debounce(function(newVal){
      this.checkSearchStr(newVal)
    }, 100)
},

但是，这有点不寻常。我不明白您为什么要对监视进行去抖动。可能您宁愿只对 checkSearchStr 方法进行去抖动。

watch: {
    searchStr(newVal){
      this.checkSearchStr(newVal)
    }
},

methods: {
    checkSearchStr: _.debounce(function(string) {
        console.log(this.foo) 
        console.log(this.$store.dispatch('someMethod',string)) 
    }, 100)
}

我想指出的另一件事是，代码中没有任何地方定义 searchStr 。当您使用 Vue 监视值时，您正在监视数据或计算属性。正如您当前所定义的那样，对 searchStr 的监视永远不会执行。

Answer 2

答案和 Vue 文档中显示的所有示例实际上都不是很好，因为组件的所有实例都将共享一个 debounce 方法。这意味着，如果您在单个页面上有 2 个组件实例，并且它们都在 100ms 窗口内触发 debounced 方法，则 2 个组件中只有 1 个会起作用。

现在在大多数情况下，这可能没问题，因为它是一个更小众的问题，但如果您确实遇到了这个问题，在组件 created() 中创建 debounce 方法以使其特定于实例会更安全。

  created() {
    this.$watch('checkSearchStr', _.debounce(function(string) {
      console.log(this.foo)
      console.log(this.$store.dispatch('someMethod',string))
    }, 100));
  }

Answer 3

在函数内部使用 this 的同时正确使用 debounce 的方法：

watch: {
    searchStr(newVal){
      this.checkSearchStr(this, newVal)
    }
},

methods: {
    checkSearchStr: _.debounce(function(self, newVal) {
        console.log(self.foo) 
        console.log(self.$store.dispatch('someMethod',newVal)) 
    }, 100)
}