事件节流和防抖是提高性能或降低网络开销的好方法。虽然 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实例。
