Vue防抖和节流怎么使用

这篇文章主要介绍“Vue防抖和节流怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue防抖和节流怎么使用”文章能帮助大家解决问题。我们先从一个简单的组件开始，我们的任务是将用户输入到文本框中的文本输出到控制台:{{value}}在输入框敲几个字符。每次输入时，值就会被 log 到控制台。我们通过使用观察者（watcher）监听 value 数据属性来实现了打印日志。但如果你想在观察者的回调中加入一个使用 value 作为参数的 GET 请求，那你应该不会期望太过频繁地发起请求。我们来对打印控制台日志这个行为做一下防抖。核心思想是创建一个防抖函数，然后在观察者内部调用该函数。我在这里选择了 ‘lodash.debounce’ 的防抖实现，但你可以自由选择喜欢的实现方式。我们来将防抖逻辑应用到组件：{{value}}但有一个区别：只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。这说明防抖在生效。观察者的防抖实现只需要 3 个简单步骤：在 create() 钩子里，创建防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(…, 500)。在观察者回调 watch.value() { … } 中传入正确的参数调用 this.debouncedWatch()。最后，beforeUnmount() 钩子中调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的防抖函数执行。采用同样的方式，你可以对任意数据属性的观察者应用防抖。然后就可以安全执行防抖回调内部的一些比较重的操作，比如网络请求、繁重的 DOM 操作，等等。上面一节，我展示了如何对观察者使用防抖，那么常规的事件处理器呢？我们重用之前用户输入数据到输入框的例子，但这一次会给输入框加个事件处理器。像往常一样，如果你没有采取任何缓冲的措施，每当值被修改时，会被打印到控制台：在输入框打几个字符。看看控制台：你会发现每次你输入的时候就会有日志被打印出来。同样，如果你会执行一些比较重的操作（比如网络请求），可就不合适了。对事件处理器使用防抖，可以参考下面这个：输入一些字符。组件只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。防抖再一次生效了！事件处理器的防抖实现只需要 3 个步骤：1.在 create() 钩子里，创建实例后，立刻将防抖回调 debounce(event => {免费云主机域名…}, 500) 赋值到 this.debouncedHandler 。2.在输入框的 template 中给 v-on:input 赋上 debouncedHandler ：3.最后，在卸载组件之前，在 beforeUnmount() 钩子中调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的函数调用。另一方面，这些例子应用了防抖的技术。然而，同样的方式可以以用于创建节流函数。你可能不理解：为什么不直接在组件的 method 选项中创建防抖函数，然后在 template 中调用这些方法作为事件处理器？这比在实例对象上创建防抖函数要简单的多。例如：这次不是在 created() 钩子里创建防抖回调了，而是将防抖回调赋给了 methods.debouncedHandler 。你如果试过 demo，你会发现是有效果的！问题是，组件使用 export default { … } 导出的 options 对象，包括方法，会被组件实例重用。如果网页中有 2 个以上的组件实例，那么所有的组件都会应用相同的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。在 Vue 中，可以很轻松的对观察者和事件处理器应用防抖和节流。核心逻辑就是，在 created() 钩子里，创建防抖或节流的回调，并赋值在实例上。A）然后在观察者内部调用实例上的防抖函数：B）或在 template 中设定一个事件处理器：在这之后，每次调用 this.debouncedCallback(…args) ，就算执行频率非常高，内部的回调也能缓冲执行。关于“Vue防抖和节流怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注百云主机行业资讯频道，小编每天都会为大家更新不同的知识点。

相关推荐: 微信小程序怎么判断手机号

本篇内容介绍了“微信小程序怎么判断手机号”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！JS实现代码：“微信小程序怎么判断手机号”的内容就介绍到这里了，感谢大家的…