Vue组件中如何使用防抖和节流
这期内容当中小编将会给大家带来有关Vue组件中如何使用防抖和节流,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
临夏ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
Vue组件中如何使用防抖和节流?
下面通过示例带大家了解一下Vue组件中使用防抖和节流控制观察者和事件处理程序的方法。
在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。
这些事件总是被频繁触发,可能 几秒一次。如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的。
我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是 防抖(debounce) 和 节流(throttle) 。
在本文中,你会了解到如何在 Vue 组件中 使用 防抖 和 节流 控制 观察者(watchers) 和 事件处理程序。
1. 观察者 防抖
我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台:
{{ value }}
打开demo:
https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue
打开 demo,在 输入框 敲几个字符。每次输入时,值就会被 log 到控制台。
我们通过使用 观察者(watcher) 监听 value
数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 value
作为参数 的 GET 请求,那你应该不会期望太过频繁地发起请求。
我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数,然后在 观察者 内部调用该函数。
我在这里选择了 'lodash.debounce'
的 防抖实现,但你可以自由选择喜欢的实现方式。
我们来将 防抖逻辑 应用到组件:
{{ value }}
试试 demo
https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue
如果你打开这个 demo,你会发现其实从用户角度来看,变化不大:你依旧可以像上一个 demo 中一样自由输入字符。
但有一个区别:只有在最后一次输入的 500ms
之后,才会将新的输入值打印日志到控制台。这说明 防抖 在生效。
观察者 的 防抖实现 只需要 3 个简单步骤:
在
create()
钩子 里,创建 防抖回调,并将其赋值到实例上:this.debouncedWatch = debounce(..., 500)
。在 观察者 回调
watch.value() { ... }
中 传入正确的参数 调用this.debouncedWatch()
。最后,
beforeUnmount()
钩子中 调用this.debouncedWatch.cancel()
,在卸载组件之前,取消所有还在 pending 的 防抖函数执行。
采用同样的方式,你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作,比如 网络请求、繁重的 DOM 操作,等等。
2. 事件处理器 防抖
上面一节,我展示了如何对 观察者 使用 防抖,那么常规的事件处理器呢?
我们重用之前用户输入数据到输入框的例子,但这一次会给输入框加个 事件处理器。
像往常一样,如果你没有采取任何缓冲的措施,每当值被修改时,会被打印到控制台:
试试 demo:
https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue
打开这个 demo,在输入框打几个字符。看看控制台:你会发现每次你输入的时候就会有日志被打印出来。
同样,如果你会执行一些比较重的操作(比如网络请求),可就不合适了。
对 事件处理器 使用 防抖,可以参考下面这个:
试试 demo:
https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue
打开 demo,输入一些字符。组件只有在最后一次输入的 500ms
之后,才会将新的输入值打印日志到控制台。防抖 再一次生效了!
事件处理器 的 防抖实现 只需要 3 个步骤:
.在
create()
钩子 里,创建实例后,立刻将 防抖回调debounce(event => {...}, 500)
赋值到this.debouncedHandler
。在输入框的 template 中 给
v-on:input
赋上debouncedHandler
:最后,在卸载组件之前, 在
beforeUnmount()
钩子中 调用this.debouncedHandler.cancel()
,取消所有还在 pending 的 函数调用。
另一方面,这些例子应用了 防抖 的技术。然而,同样的方式可以以用于创建 节流函数。
3. 注意
你可能不理解:为什么不直接在 组件的 method
选项中创建 防抖函数,然后在 template 中调用这些方法作为事件处理器?
// ... methods: { // Why not? debouncedHandler: debounce(function () { ... }}, 500) } // ...
这比在实例对象上创建 防抖函数 要简单的多。
例如:
试试 demo
https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue
这次不是在 created()
钩子 里创建 防抖回调了,而是将 防抖回调 赋给了 methods.debouncedHandler
。
你如果试过 demo,你会发现是有效果的!
问题是,组件使用 export default { ... }
导出的 options 对象,包括方法,会被组件实例重用。
如果网页中有 2 个以上的组件实例,那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler
— 这会导致防抖出现故障。
4. 总结
在 Vue 中,可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。
核心逻辑就是,在 created()
钩子 里,创建 防抖 或 节流 的回调,并赋值在实例上。
// ... created() { this.debouncedCallback = debounce((...args) => { // The debounced callback }, 500); }, // ...
A)然后在观察者内部调用实例上的防抖函数:
// ... watch: { value(...args) { this.debouncedCallback(...args); }, }, // ...
B)或在 template 中设定一个事件处理器:
在这之后,每次调用 this.debouncedCallback(...args)
,就算执行频率非常高,内部的回调也能缓冲执行。
上述就是小编为大家分享的Vue组件中如何使用防抖和节流了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
网站标题:Vue组件中如何使用防抖和节流
标题URL:http://scyanting.com/article/gjesch.html