vue中的防抖和节流

在监听事件时，这些事件总是被频繁触发，可能几秒一次。如果只对每次事件都发起fetch请求，那你无敌了孩子。

我们需要做的就是让这个事件的执行速度慢慢的，这种减缓事件处理程序的执行速度科技就是防抖（debounce）和节流（throttle）。

1.观察者防抖

我们先从一个简单的小组件开始，我们的任务就是将输入框里的文本输出到控制台

<template>
    <input v-model="value" type="text">
    <p>{{ value }}</p>
</template>
<script>
export default {
    data() {
        return {
            value: ""
        }
    },
    watch: {
        value(newvalue, oldvalue) {
            console.log("Value changed:", newvalue)
        }
    }
}
</script>
<style></style>

输入框输入集合字符，每次输入时，值都会被log到控制台。

我们通过观察者监听value数据属性来实现了打印日志。如果你想在观察者的回调中加入一个使用value作为参数的GET请求，那你应该不会想要太过频繁的发起请求。

我们来对打印控制台这个行为做一个防抖，注意创建一个防抖函数！！！！！

在观察者内部调用该函数。

<template>
    <input v-model="value" type="text">
    <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce"
export default {

    data() {
        return {
            value: ""
        }
    },
    watch: {
        value(...args) {
            this.debouncedWatch(...args)
        }
    },
    created() {
        this.debouncedWatch = debounce((newValue, oldValue) => {
            console.log('New value', newValue)
        }, 500)
    },
    beforeUnmount() {
        this.debouncedWatch.cancel()
    }
}
</script>
<style></style>

只有在最后一次输入的500ms之后，才会将新的输入值打印日志到控制台。

这说明防抖在生效。

实现防抖的三个简单步骤：

1.在 create() 钩子 里，创建 防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(..., 500)。

2.在 观察者 回调 watch.value() { ... }  中 传入正确的参数 调用 this.debouncedWatch()。

3.最后，beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的 防抖函数执行
 

总结：

在vue中可以很轻松的实现防抖和节流。

核心逻辑就是，在created()钩子里，创建防抖或节流的回调，并赋值在实例上：

 created() {
        this.debouncedWatch = debounce((newValue, oldValue) => {
            console.log('New value', newValue)
        }, 500)
    },

观察者内部调用实例上的防抖函数：

watch: {
        value(...args) {
            this.debouncedWatch(...args)
        }
    },

在这之后每次调用就算执行频率非常的高，内部的回调也只会让你慢慢的！！！！！（缓冲执行）