如何正确使用带有 lodash debounce 的 Vue JS 手表答案

【问题标题】：How to correctly use Vue JS watch with lodash debounce如何正确使用带有 lodash debounce 的 Vue JS 手表
【发布时间】：2017-12-24 00:29:35
【问题描述】：

我正在使用 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是我的商店也是undefined

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

【问题讨论】：

标签： javascript vue.js vuejs2 lodash vuex

【解决方案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 上的监视将永远不会执行。

【讨论】：

我认为函数内部的this (this.foo) 不是VueJS。
@rogeriolino 那不正确。当一个组件被实例化时，该方法被绑定到该组件。换句话说，this 将成为 Vue。
我刚刚找到了 debounce 的 Vue.js 文档（文档 - vuejs.org/v2/guide/…）。感谢您的回答（第 2 部分），非常有帮助。我不应该在被监视的元素上运行debounce。
hmm.. 我认为代码可以更短：watch: { searchStr: "checkSearchStr" } source: youtube.com/…
@Hiep 当然，API 中记录了这一点。 vuejs.org/v2/api/#watch

【解决方案2】：

正如 @Bert 在 cmets this 中提到的，作用域是 function 的本地范围。因此，要使this 作用于data 中的属性，请更改为：

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

【讨论】：

【解决方案3】：

由于它需要调用外部作用域中定义的方法，因此去抖动函数看起来是arrow function 的完美候选者：

watch: {
  searchStr: 'checkSearchStr'
},
methods: {
  checkSearchStr: _.debounce(val => {
    // `this` is the component instance (a.k.a. outer `this`)
    console.log(this)

    this.$store.dispatch('someMethod', val); 
  }, 100)
}

【讨论】：

【解决方案4】：

在函数内部使用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)
}

【讨论】：