vue使Lodash实现节流和防抖的问题

使用lodash实现节流和防抖的问题：

首先下载lodash插件

cnpm i lodash -S

在项目使用防抖

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

一般我们应用在 搜索框防抖，如果用户只要输入一个字符，就会触发请求，不仅从资源上来说是很浪费的，而且实际应用中，用户也是输出完整的字符后，才会请求，下面我们优化一下：

<div class=''>
	<input type="text" v-model="value" @input="input" />
</div>
<script>
// 引入lodash
import _ from 'lodash'
export default {
    data() {
        return {
            value:''
        };
    },
    methods: {
        input:_.debounce(()=>{
            console.log(this);  // undefined
        },1000)
    }
};
</script>

❓❓在vue中methods箭头函数的this指向undefined问题：

以上代码在浏览器会输出undefined。哎，不应该指向window吗？
搞清楚这个问题，我们首先要知道：

1. 箭头函数的this指向父级作用域的this
2. vue默认开启了严格模式
3. 全局作用域下的函数this指向window，在严格模式下指向undefined

所以在debounce里面不要使用箭头函数,我们要这样写才有效：

methods: {
    input:_.debounce(function(){
        console.log(this.value);
    },1000)
}

在项目使用节流

在一个单位时间内，只能触发一次

一般我们应用在 倒计时发送验证码，当用户点击按钮进行倒计时，不小心再次点击，这样倒计时会重新进行计数，这样对用户体验很不好，下面我们优化一下：

methods: {
    input:_.throttle(function(){
        console.log(this.value);
    },1000)
}