Vue - 如何使用 lodash 去抖动

Question

我正在使用从 main.js

中导入的 lodash 去抖动

import lodash from 'lodash'
Vue.prototype._ = lodash

我正在使用 this._.find(...)，一切正常。但是如果我使用 debounce 它是行不通的。

<script>
   export default {
      methods: {
        delay: this._.debounce(function () {
         // Code
        }, 500),
      }
    }
</script>

它抛出这个错误Uncaught TypeError: Cannot read property 'debounce' of undefined

this._.debounce(...) 的正确使用方法是什么？

Answer 1

这应该有效

<script>
import { debounce } from 'lodash-es' // optimized es6-import package, similar to usual 'lodash'

export default {
  methods: {
    yourCoolFunction: debounce(function (event) { // event is the object parameter given to 'yourCoolFunction' if any
      // your tasty code
    }, 500),
  }
}

并且不要忘记将其也添加到 nuxt.config.js 文件中

build: {
  transpile: ['lodash-es'],
}

有关什么是 debounce, you can check this article: https://redd.one/blog/debounce-vs-throttle

的更多详细信息

Answer 2

试试这个。对我来说，它的工作方式是 _.debounce，如下所示：

    <script>
       export default {
          methods: {
             delay: _.debounce(function() {
               //code
             }, 700),
          }
        }
    </script>

Vue - 如何使用 lodash 去抖动

Vue - How to use lodash debounce

javascript

lodash

vue.js