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

Question

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

...
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

为什么我的方法在通过

this

调用时不知道

_.debounce

？正确的用法是什么？

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 个实例，并且它们都在 100 毫秒窗口内触发 debounced 方法，则这 2 个组件中只有 1 个可以工作。

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

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

Answer 3

在函数内使用

this

的同时使用去抖的正确方法：

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

Answer 4

import { watch } from 'vue'
import debounce from 'lodash/debounce'

watch(form, debounce(() => {
    console.log('Send API request')
}, 500))

通过这个简单的添加，watch 回调将等待执行 直到自上次调用以来经过 500 毫秒（或 500 毫秒） 因为它还没有被调用）。简单来说，用户有500ms 他们键入的字符之间。您可以增加或减少此值 价值如您所需要。

Answer 5

正如 @Bert 在评论中提到的

this

范围是

function

的本地范围。因此，要使

this

的范围适用于

data

中的属性，请更改为：

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