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

Posted 2023-02-22

【中文标题】如何正确使用带有 lodash debounce 的 Vue JS 手表

【英文标题】：How to correctly use Vue JS watch with lodash debounce

【发布时间】：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？正确的用法是什么？

【参考方案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)