vue使用防抖函数,vue按钮点击防抖

　　在这篇文章中，边肖整理了一个在Vue组件中使用防抖和节流的例子分析。有需要的朋友可以借鉴一下。

　　监视频繁触发的事件时要小心，例如用户在输入框中键入、窗口大小调整、滚动和交叉点观察器事件。

　　这些事件总是被频繁触发，可能每隔几秒钟就触发一次。显然，为每个事件启动一个获取请求(或类似的行为)是不明智的。

　　我们需要做的是降低事件处理程序的执行速度。这个缓冲技术就是防抖(去抖)和节流(节流)。

1. 观察者 防抖

　　让我们从一个简单的组件开始。我们的任务是将用户在文本框中输入的文本输出到控制台：

　　模板

　　输入v-model=value type=text /

　　p{{ value }}/p

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　值： ，

　　};

　　},

　　观察：{

　　值(新值，旧值){

　　console.log(值已更改： ，new Value)；

　　}

　　}

　　};

　　/脚本

　　开放演示：

　　https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

　　打开演示并在输入框中键入几个字符。每次输入时，该值都会记录到控制台中。

　　我们通过使用watcher来监视值数据属性，从而打印日志。但是如果您想在观察器的回调中添加一个带有参数值的GET请求，那么您不应该期望过于频繁地发出请求。

　　对于打印控制台日志的行为，我们来做一些防抖。核心思想是创建一个防抖函数，然后在观察者内部调用它。

　　我在这里选择了‘lodash . de bounce’的防抖实现，但是你可以自由选择你的首选实现。

　　让我们将防抖逻辑应用于组件：

　　模板

　　输入v-model=value type=text /

　　p{{ value }}/p

　　/模板

　　脚本

　　从“lodash.debounce”导入去抖；

　　导出默认值{

　　data() {

　　返回{

　　值： ，

　　};

　　},

　　观察：{

　　价值(.args) {

　　this . de bounce watch(.args)；

　　},

　　},

　　已创建(){

　　this . de bounce watch=de bounce((new value，oldValue)={

　　console.log(新值：，New value)；

　　}, 500);

　　},

　　卸载之前(){

　　this . debouncedwatch . cancel()；

　　},

　　};

　　/脚本

　　尝试演示

　　https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

　　如果你打开这个演示，你会发现，从用户的角度来看，变化并不大：你仍然可以像上一个演示一样自由输入字符。

　　但有一点不同：只有在最后一次输入500ms后，新的输入值才会被打印到控制台。这说明防抖在起作用。

　　观察者的防抖实现只需要3个简单的步骤：

　　在create()钩子中，创建一个防抖回调，并将其分配给实例：this . de bounce watch=de bounce(. 500).

　　通过在观察器回调watch.value() {.}.

　　最后，在卸载组件之前，在beforeUnmount()钩子中调用this.debouncedWatch.cancel()来取消所有挂起的防抖功能。

　　同样的，你可以对任何数据属性的观察者应用防抖。然后就可以安全地在防抖回调内部执行一些繁重的操作，比如网络请求、繁重的DOM操作等等。

2. 事件处理器 防抖

　　在上一节中，我展示了如何为观察者使用防抖。传统的事件处理程序呢？

　　我们将重用前面的例子，用户在输入框中输入数据，但这次我们将向输入框添加一个事件处理程序。

　　像往常一样，如果你不采取任何缓冲措施，每当值被修改，它将被打印到控制台：

　　模板

　　输入v-on:input= handler type= text /

　　/模板

　　脚本

　　导出默认值{

　　方法：{

　　处理程序(事件){

　　console.log(新值：，event . target . value)；

　　}

　　}

　　};

　　/脚本

　　尝试演示：

　　https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

　　打开这个演示，在输入框中输入几个字符。看控制台：你会发现每次打字都会打印一个日志。

　　同样，如果可以执行一些繁重的操作(比如网络请求)，也是不合适的。

　　要对事件处理器使用防抖，请参考以下内容：

　　模板

　　输入v-on:input= de bounce handler type= text /

　　/模板

　　脚本

　　从“lodash.debounce”导入去抖；

　　导出默认值{

　　已创建(){

　　this . de bounce handler=de bounce(event={

　　console.log(新值：，event . target . value)；

　　}, 500);

　　},

　　卸载之前(){

　　this . debounced handler . cancel()；

　　}

　　};

　　/脚本

　　尝试演示：

　　https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

　　打开演示并输入一些字符。只有在最后一次输入500毫秒后，组件才会将新的输入值打印到控制台。防抖又起作用了！

　　事件处理器的防抖实现只需要三个步骤：在create()钩子中，创建实例后，立即分配防抖回调去抖(event={.}，500)到此。去抖处理器

　　将去抖手柄分配给输入框模板中的v-on:input:

　　最后，在卸载组件之前，调用beforeUnmount()钩子中的this.debouncedHandler.cancel()来取消所有挂起的函数调用。

　　另一方面，这些例子应用了防抖技术。然而，同样的方法也可以用来创建节流函数。

3. 注意

　　你可能不理解：为什么不直接在组件的方法选项中创建防抖函数，然后在模板中调用这些方法作为事件处理程序呢？

　　//.

　　方法：{

　　//为什么不呢？

　　去抖处理器：去抖(function () {.}}, 500)

　　}

　　//.

　　这比在实例对象上创建防抖功能简单得多。

　　例如：

　　模板

　　输入v-on:input= de bounce handler type= text /

　　/模板

　　脚本

　　从“lodash.debounce”导入去抖；

　　导出默认值{

　　方法：{

　　//不要这样！

　　去抖处理器：去抖(函数(事件){

　　console.log(新值：，event . target . value)；

　　}, 500)

　　}

　　};

　　/脚本

　　尝试演示

　　https://code sandbox . io/s/vue-事件处理程序-去抖-不正确-320ci？file=/src/App.vue

　　这一次，不是在created()钩子中创建防抖回调，而是将防抖回调分配给methods . de bounce handler

　　如果你试过demo，你会发现它很有效！

　　问题是组件使用export default {.}，包括方法，将由组件实例重用。

　　如果网页中有两个以上的组件实例，那么所有组件将应用相同的防抖功能方法。

4. 总结

　　在Vue中，很容易对观察者和事件处理器应用防抖和节流。

　　核心逻辑是在created()钩子中创建一个防抖或节流回调，并将其分配给实例。

　　//.

　　已创建(){

　　this . de bounce dcallback=de bounce((.args)={

　　//去抖回调

　　}, 500);

　　},

　　//.

　　a)然后在观察者内部的实例上调用防抖函数：

　　//.

　　观察：{

　　价值(.args) {

　　this.debouncedCallback(.args)；

　　},

　　},

　　//.

　　b)或者在模板中设置一个事件处理程序：

　　模板

　　输入v-on:input= de bounce handler type= text /

　　/模板

　　从那以后每次这样。this.debouncedCallback(.args)被调用时，即使执行频率非常高，内部回调也可以缓冲执行。

　　关于Vue组件中防抖和节流使用的实例分析，本文就到此结束。请搜索我们以前的文章或继续浏览下面的相关文章，以获得更多关于Vue组件内容的相关分析。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。