共计 3583 个字符，预计需要花费 9 分钟才能阅读完成。
在监听频繁触发的事件时，肯定要多加小心，比方 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。
这些事件总是被频繁触发，可能 几秒一次。如果针对每次事件都发动 fetch 申请（或相似的行为），那显然是不明智的。
咱们须要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖（debounce）和 节流（throttle）。
在本文中，你会理解到如何在 Vue 组件中 应用 防抖 和 节流 管制 观察者（watchers）和 事件处理程序。
- 观察者 防抖
咱们先从一个简略的组件开始，咱们的工作是 将用户输出到 文本框中的文本 输入到控制台:
<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>
复制代码
关上 demo，在 输入框 敲几个字符。每次输出时，值就会被 log 到控制台。
咱们通过应用 观察者（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>
复制代码
如果你关上这个 demo，你会发现其实从用户角度来看，变动不大：你仍旧能够像上一个 demo 中一样自在输出字符。
但有一个区别：只有在最初一次输出的 500ms 之后，才会将新的输出值打印日志到控制台。这阐明 防抖 在失效。
观察者 的 防抖实现 只须要 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>
复制代码
关上 demo，输出一些字符。组件只有在最初一次输出的 500ms 之后，才会将新的输出值打印日志到控制台。防抖 再一次失效了！
事件处理器 的 防抖实现 只须要 3 个步骤：
. 在 create() 钩子 里，创立实例后，立即将 防抖回调 debounce(event => {…}, 500) 赋值到 this.debouncedHandler。
在输入框的 template 中 给 v-on:input 赋上 debouncedHandler：<input v-on:input=”debouncedHandler” type=”text” />
最初，在卸载组件之前，在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel()，勾销所有还在 pending 的 函数调用。
另一方面，这些例子利用了 防抖 的技术。然而，同样的形式能够以用于创立 节流函数。
- 留神
你可能不了解：为什么不间接在 组件的 method 选项中创立 防抖函数，而后在 template 中调用这些办法作为事件处理器？
// …
methods: {
// Why not?
debouncedHandler: debounce(function () {...}}, 500)}
// …
复制代码
这比在实例对象上创立 防抖函数 要简略的多。
例如：
<template>
<input v-on:input=”debouncedHandler” type=”text” />
</template>
<script>
import debounce from “lodash.debounce”;
export default {
methods: {
// Don't do this!
debouncedHandler: debounce(function(event) {console.log('New value:', event.target.value);
}, 500)}
};
</script>
复制代码
这次不是在 created() 钩子 里创立 防抖回调了，而是将 防抖回调 赋给了 methods.debouncedHandler。
你如果试过 demo，你会发现是有成果的！
问题是，组件应用 export default {…} 导出的 options 对象，包含办法，会被组件实例重用。
如果网页中有 2 个以上的组件实例，那么所有的组件都会利用 雷同 的防抖函数 methods.debouncedHandler — 这会导致防抖呈现故障。
- 总结
在 Vue 中，能够很轻松的对 观察者 和 事件处理器 利用 防抖 和 节流。
外围逻辑就是，在 created() 钩子 里，创立 防抖 或 节流 的回调，并赋值在实例上。
// …
created() {
this.debouncedCallback = debounce((...args) => {// The debounced callback}, 500);},
// …
复制代码
A）而后在观察者外部调用实例上的防抖函数：
// …
watch: {
value(...args) {this.debouncedCallback(...args);
},},
// …
复制代码
B）或在 template 中设定一个事件处理器：
<template>
<input v-on:input=”debouncedHandler” type=”text” />
</template>
复制代码
在这之后，每次调用 this.debouncedCallback(…args)，就算执行频率十分高，外部的回调也能缓冲执行。
