在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。
这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。
我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是防抖和节流。
观察者 防抖
我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台:
<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>
我们通过使用 观察者(watcher) 监听 value
数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value
作为参数 的 GET 请求,那你应该不会期望太过频繁地发起请求。
我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数,然后在 观察者 内部调用该函数。
我在这里选择了 'lodash.debounce'
的 防抖实现,但你可以自由选择喜欢的实现方式。
我们来将 防抖逻辑 应用到组件:
<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>
观察者 的 防抖实现 只需要 3 个简单步骤:
- 在
create()
钩子 里,创建 防抖回调,并将其赋值到实例上:this.debouncedWatch = debounce(..., 500)
。 - 在 观察者 回调
watch.value() { ... }
中 传入正确的参数 调用this.debouncedWatch()
。 - 最后,
beforeUnmount()
钩子中 调用this.debouncedWatch.cancel()
,在卸载组件之前,取消所有还在 pending 的 防抖函数执行。
采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。
事件处理器 防抖
上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?
我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。
像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:
<template>
<input v-on:input="handler" type="text"
</template>
<script>export default {
methods: {
handler(event) {
console.log('New value:', event.target.value);
}
}
};
</script>
复制代码
打开这个 demo,在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。
同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。
对 事件处理器 使用 防抖,可以参考下面这个:
<template>
<input v-on:input="debouncedHandler" type="text"
</template>
<script>import debounce from "lodash.debounce";
export default {
created() {
this.debouncedHandler = debounce(event {
console.log('New value:', event.target.value);
}, 500);
},
beforeUnmount() {
this.debouncedHandler.cancel();
}
};
</script>
事件处理器 的 防抖实现 只需要 3 个步骤:
- . 在
create()
钩子 里,创建实例后,立刻将 防抖回调debounce(event => {...}, 500)
赋值到this.debouncedHandler
。 - 在输入框的 template 中 给
v-on:input
赋上debouncedHandler
:<input v-on:input="debouncedHandler" type="text" />
- 最后,在卸载组件之前, 在
beforeUnmount()
钩子中 调用this.debouncedHandler.cancel()
,取消所有还在 pending 的 函数调用。
另一方面,这些例子应用了 防抖 的技术。然而,同样的方式可以以用于创建 节流函数。
标签:yyds,防抖,vue,debouncedWatch,debounce,观察者,value,输入框 From: https://blog.51cto.com/u_11365839/5801968