在 Vue 中使用lodash对事件进行防抖和节流

事件节流和防抖是提高性能或降低网络开销的好方法。虽然 Vue 1曾经支持对事件的节流和防抖，但是在Vue 2中为了保持核心的简单性，删除对事件的节流和防抖的支持。因此，在Vue 2对对事件进行防抖和节流我们可以使用 lodash 这个js库来做。

1. 安装

使用 yarn 和 npm 安装

// Yarn
 yarn add lodash
// NPM
 npm install lodash --save

2. throttle 方法

要对事件进行节流处理方法非常简单，只需将要调用的函数包装在lodash的_.throttle函数中即可。

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
 
<script>
import _ from 'lodash'
 
export default {
  methods: {
    throttledMethod: _.throttle(function() {
      console.log('I get fired every two seconds!')
    }, 2000)
  }
}
</script>

3. debounce 方法

尽管节流在某些情况下很有用，但一般情况我们经常使用的是防抖。防抖实质上将我们的事件分组在一起，并防止它们被频繁触发。要在Vue组件中使用节流，只需将要调用的函数包装在lodash的_.debounce函数中。
当前的项目是需要实时保存用户在页面中写入的信息，但是不可能每个字符都不停地保存到后端，所以使用 debounce 函数，将输入一串字符停下后再进行保存。

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
 
<script>
import _ from 'lodash'
 
export default {
  methods: {
    throttledMethod: _.debounce(function() {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}
</script>

注意 throttling 和debouncing 回调函数使用function（）{}，这样内部才可以正常调用vue的this，否则会报 undefined 。因为在函数内部中，已经做了apply，所以这里的this指向的就是vue实例。